Quick CSS help - stopping divs overlapping

[joe8232]

I am having some problems with a couple of div's on a webpage I am developing. The site is here.

The problem is with the bottom div - it seems to overlap the two above it. The CSS I have used is:

#leftNav {
width:170px;
padding:0;
margin-right:10px;
float:left;
}
#center {
float:left;
background-color:#fff;
color:#000;
width:680px;
padding:15px 15px 15px 15px;
margin-bottom:30px;
margin-left:10px;
margin-top:20px;
}
#footer {
clear:both;
width:100%;
padding:2px 2px 2px 2px;
border-top:1px dashed #2E4C6F;
border-bottom:1px dashed #2E4C6F;
}

EDIT: I can fix it by adding margin-bottom:150px to leftNav but I really don't understand why that fixes it.
Any help would be much appreciated.

 

[angelwatt]

The problem is you define #leftNav twice.

/* LeftNav bar */
#leftNav {
	width:170px;
	height:300px;
	padding:0;
	margin-right:10px;
	float:left;
	margin-bottom:100px;
	margin-top:0;
}
/* LeftNav bar */
#leftNav {
	width:170px;
	padding:0;
	margin-right:10px;
	float:left;
}

Combine these together then get ride of the height property and adjust the margin-bottom appropriately. Also, I noticed that the reference to list.css returned a 404 error. Something to look into.

 

[joe8232]

Thanks for that - such a stupid mistake Will look into that 404 as well. Thanks again