DIV's help. [Archive]

Andys

30-10-2008, 01:31 PM

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

Here's my 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;
http://www.tehupload.com/uploads/app-90144632157121579.png

instead it looks like this;
http://www.tehupload.com/uploads/app-843544848360008010.png

why's this? :S