Left-Sidebar overlaps on the content div

[bugzy]

Here's the problem

 

 

My CSS code

 

body{
margin:0;
}

#container{
width:100%;
height:auto;
background-color:#666;
padding: 20px 0 20px 0;
}


#header{
width:80%;
height:130px;
background-color:#FFF;
}


#navigation{
font-family:Tahoma, Geneva, sans-serif;
width:73%;
height:auto;
background-color:#CCC;
display:block;
text-align:left;
font-weight:bold;
font-size:16px;
text-transform: capitalize;
padding: 10px 30px 10px 5%;
margin: 10px 0 10px 0;
}




#left-sidebar{
width:15%;
height:auto;
float:left;
background-color:#CCC;
padding: 20px 20px 40px 30px;
margin:10px 30px 10px 150px;
text-align:left;
}


#content{
background-color:#FFF;
width:76%;
height:auto;
min-height:750px;
text-align:left;
padding: 10px 30px 0 30px;
}



#footer{
clear:both;
height:30px;
background-color:#CCC;
width:81%;
margin: 10px 0px 0px 10px;
}

 

 

What's seemed to be the problem guys?

[Mahngiel]

assuming the sidebar is a child of 'container', you'll need to clear your floats at the end of container. <div class="clear"></div> is how a lot of designers do it, or you can use an :after {content: ''; display: block; clear: both;} to be more semantic.

[scootstah]

or you can use an :after {content: ''; display: block; clear: both;} to be more semantic.

 

:after isn't supported by IE <= 7, so you'll have to use the ugly method if those versions concern you.