DIV's help.

Andys · 30-10-2008, 01:31 PM

Right, I'm just learning DIV's and i've got a problem.

Here's my code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">

body {
   font-family: verdana;
   font-size: 10px;
   margin: auto;
   font-color: #000000;
       }
       
.headerfont {
    font-family: tahoma;
    font-size: 8px;
    font-color: #FFFFFF;
                  }

.big_container {
width: 632px;
}

.box_1_container {
width: 207px;
float: left;
}

.box_1_top {
width: 207px;
height: 31px;
background-image: url(images/box1_top.png);
color: #FFFFFF;
}

.box_middle {
width: 207px;
background-image: url(images/box_middle.png);
}

.box_bottom {
width: 207px;
background-image: url(images/box_bottom.png);
}

.box_2_container {
width: 207px;
float: left;
}

.box_2_top {
width: 207px;
background-image: url(images/box2_top.png);
}

.box_2_middle {
width: 207px;
background-image: url(images/box_middle.png);
}

.box_2_bottom {
width: 207px;
background-image: url(images/box_bottom.png);
}

.box_3_container {
width: 207px;
float: left;
}

.box_3_top {
width: 207px;
background-image: url(images/box3_top.png);
}

.box_3_middle {
width: 207px;
background-image: url(images/box_middle.png);
}

.box_3_bottom {
width: 207px;
background-image: url(images/box_bottom.png);
}

.main_container {
width: 490px;
float: right;
margin-left: 16px;
}

.main_top {
width: 490px;
background-image: url(images/main_top.png);
}

.main_middle {
width: 490px;
background-image: url(images/main_middle.png);
}

.main_bottom {
width: 490px;
background-image: url(images/main_bottom.png);
}
</style>
</head>
<body>
<div class="big_container">

<div class="box_1_container">
<div class="box_1_top">hello
<div class="box_middle">this<br />
text<br />
should<br />
EXPAND!<br />
yes...<br />
it<br />
does<br />
<div class="box_bottom">
</div>
</div>
</div>
</div>
</div>
</body>
</html>

The box is supposed to look like this;

instead it looks like this;

why's this? :S

Excellent2 · 30-10-2008, 01:46 PM

You didn't end the box1 div to it's just going over it lmao.

Andys · 30-10-2008, 01:48 PM

oh.........
sorted

lmao.

Thread: DIV's help.

Thread Tools

DIV's help.

Posting Permissions