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:



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.