leftsidebar loopt niet tot einde pagina

Ik ben een website proberen aan het maken.

Als ik een leftsidebar en maincontent probeer aan te maken loopt mijn leftsidebar niet tot op het einde van de pagina. Het stop na een tijdje alhoewel ik de hoogte op 100% heb ingesteld. Dan loopt mijn tekst van de maincontent gewoon onder mijn leftsidebar door.

Mijn instellingen in CS3 zijn als volgt:

.leftsidebar{ float: left; width:auto; height: 100%; margin: auto; padding: 5px; border-right: 2px solid #000; color: #000;}

.mainContent{ padding: 5px; margin:auto; text-align: center;}

Een rightsidebar heb ik niet dus die hoef ik niet op te geven.

Waar kan het nog ergens fout lopen?

het komt door dat je een floating div hebt aangemaakt (leftsidebar). Deze div is hoe dan ook net zo hoog als dat de inhoud er van is. Het floating is dat hij ergens overheen ligt. Zoals je dus ook bij een artikel op internet een afbeelding hebt die links of rechts is uitgelijnd.

Ik denk dat deze CSS en HTML code je uit de brand helpt.

HTML

<div class="header">
Dit is een header
</div>
<div class="content">
<div class="sidebar left ">
	dit is een linker sidebar, die helemaal tot beneden moet komen
</div>
<div class="main_content ">
	En dit is de inhoud van de gehele pagina. 
</div>
</div>

CSS

body{
margin:0px;
}
.header{
background: #CCC;
height:100px;
}
.content{
width:1080px;
}
.sidebar{
height: 100%;
width:260px;
}	
.left{
float:left;
}
.right{
float: right;
}
.main_content{
padding: 10px;
}