Float not 'filling' background DIV.

[Helx]

Hi,

I'm trying to make a new website. And I'm having more issues with CSS. I have a DIV that holds the white background, and another that adds padding. I then have 2 more for a sidebar and main content.

[syntax=css]#main {
position: relative;
z-index: 1;
background-color: #FFF;
-moz-box-shadow: 0px 0px 6px #000;
-webkit-box-shadow: 0px 0px 6px #000;
box-shadow: 0px 0px 6px #000;
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000')";
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=0, Color='#000000');
}
#main_padding {
padding-top: 6px;
padding-bottom: 6px;
padding-left: 6px;
padding-right: 6px;
}
#main_panel {
float: right;
width: 80%;
}
#sidebar {
float: left;
width: 20%;
}[/syntax]
It ends up looking a bit like this



Please help ! What do I do ?

[KnightMaire]

Add "overflow: hidden;" to the white bar.. It's a CSS hack that pushes it past the float.

[Helx]

Add "overflow: hidden;" to the white bar.. It's a CSS hack that pushes it past the float.

Lifesaver, thanks