Coding help?

[Mickword]

Right, this has been annoying me for hours. I've been coding this:

Index


<div id="_content_area"> <div id="_content_area_2">
<div id="_content_base_1">
<div id="_title_4">
Hey
</div>
Hey4
</div>
<div id="_content_base_2">
<div id="_title_4">
Hey
</div>
Hey4
</div>
<div id="_content_base_3">
<div id="_title_4">
Hey
</div>
Hey4
</div>
</div>
</div>
</div>
<div id="_footer_bg">
Hey...
</div>




Style Sheet:


div#_content_area { width: 936px;
padding-top: 25px;
padding-bottom: 25px;
text-align: left;
}


div#_content_area_2 {
width: 936px;
}


div#_content_base_1 {
width: 312px;
height: 150px;
float: left;
}


div#_content_base_2 {
width: 312px;
height: 150px;
float: left;
}


div#_content_base_3 {
width: 312px;
height: 150px;
float: left;
}


div#_content_base_4 {
width: 396px;
}


div#_title_4 {
font-size: 15px;
margin-bottom: 10px;
font-weight: bold;
}


div#_footer_bg {
background-image: url( "_baseimages/_footer_bg.png" );
width: 100%;
height: 167px;
}

But whenever I type this in it looks like this:

http://i41.tinypic.com/2194j8.png

the main content area is over lapping the footer, and I honestly cannot figure out how to fix it.

All help will be welcomed!

[Chippiewill]

<div style="clear:both;"></div>

somewhere just before the footer ought to fix it.