Aligning DIV tags?

[Andrew R]

Can anybody tell me why the 'bottom_right' div tag is not slotting into the layout as shown in the screenshot below...

 

 

CSS

 

.left_side {
background-image: url(images/left_side.png);
float: left;
height: 679px;
width: 86px;
}
.right_side {
background-image: url(images/right_side.png);
background-repeat: repeat-y;
float: right;
height: 679px;
width: 87px;
clear: right;
}
.bottom_bottom {
background-image: url(images/bottom.png);
height: 81px;
width: 581px;
float: left;
clear: none;
}
.bottom_left {
background-image: url(images/bottom_left.png);
background-repeat: repeat;
height: 184px;
width: 206px;
float: left;
clear: both;
}
.left_image {
background-image: url(images/left_image.jpg);
background-repeat: no-repeat;
height: 454px;
width: 327px;
}
.bottom {
height: 93px;
width: 580px;
float: left;
background-color: #EEEEEE;
border-bottom-width: 10px;
border-bottom-style: solid;
border-bottom-color: #FFFFFF;
clear: none;
}
.bottom_right {
background-image: url(images/bottom_right.png);
background-repeat: no-repeat;
height: 184px;
width: 214px;
float: right;
}
.overall {
width: 1000px;
}
.centre {
background-color: #FFFFFF;
float: left;
padding-right: 10px;
padding-left: 10px;
clear: none;
}
.top_grad {
background-image: url(images/top_grad.jpg);
background-repeat: repeat-x;
height: 59px;
width: 807px;
}
.logo {
background-image: url(images/top_image.jpg);
background-repeat: no-repeat;
height: 166px;
width: 807px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #0066CC;
}

 

DIV tags

 

<div class="overall">

<div class="left_side"></div>
<div class="right_side"></div>


<div class="centre">
<div class="logo"></div>

<div class="top_grad"></div>

<div class="left_image"></div>

</div>

<div class="bottom_left"></div>
<div class="bottom"></div>
<div class="bottom_bottom"></div>
<div class="bottom_right"></div>

</div>

 

 

I have been trying for hours to get this working with no luck.

 

Any help would be much appreciated

 

Thanks 

 

[haku]

No time to say much, but float everything left. It will all bump up against each other in a row. Set a width equal to the whole thing (plus any borders) on the containing div, and if you float everything left, all the rows should line up perfectly.