Simple problems with CSS backgrounds

[Stromgren]

Hello

I have a problem with the structure of my site.

Because the colums is set at auto height they won't reach all the way to the bottom of the page (see picture):

http://byvejen.dk/structureproblem.png

The site structure goes as follows:



<div id="wrapper">
<div id="header">
</div>
<div id="main">
<div id ="leftcolumn">
</div>
<div id ="centercolumn">
</div>
<div id ="rightcolumn">
</div>
</div>
<div id="footer">
</div>
</div>


And this is the CSS code:



#wrapper {
width:1000px;
margin-left:auto;
margin-right:auto;
background-color:#ebebeb;
}

#header {
width:1000px;
height:225px;
background-image:url(../images/header.png);
}

#main {
width:1000px;
min-height:600px;
background-color:#ebebeb;
margin-bottom:0px;
}

#leftcolumn {
float:left;
width:180px;
padding-left:35px;
padding-right:25px;
background-color:#ebebeb;
margin-bottom:0px;
}

#centercolumn {
float:left;
width:520px;
background-color:#ebebeb;
margin-bottom:0px;
}

#rightcolumn {
float:left;
width:180px;
padding-left:25px;
padding-right:35px;
background-color:#ebebeb;
margin-bottom:0px;
}

#footer {
float:left;
width:1000px;
background-color:#ebebeb;
}


Although i added background color to all divs i still get the white spaces?

Can anyone help me out?

Thanks in advance :)

[SB65]

You need to clerar you floats at the end of #main. Try:


#main {
width:1000px;
min-height:600px;
background-color:#ebebeb;
margin-bottom:0px;
overflow:auto;
}

[Stromgren]

You need to clerar you floats at the end of #main. Try:


#main {
width:1000px;
min-height:600px;
background-color:#ebebeb;
margin-bottom:0px;
overflow:auto;
}

You're a champ :thumbsup:

Not sure i really get these flows now, but it sure worked :)