how to make the footer div start after all other divs have finished

Question

UPDATE: look at the demo here: http://amit-verma.com/template_test/

i am having a slight problem with the alignment of the footer div. i have a header at the top.

div = maincontent
{
two divs for content, side by side.
another 2 divs side by side below the content div.
}

//just to represent. i know this is not html ;)

now i want the footer div to start after the maincontent div finishes. i can do that if i specify a fixed height for the maincontent div. but i dont want to specify a height for it. if i dont specify the height, the footer div starts at the middle of the page.

what am i doing wrong?

the code

sidebar {

margin-top: 10px;
width: 300px;
float: right;
text-align: justify;
font-size: 14px;
line-height: 18px;
color: #FFF;

}

maincontent {

margin-top: 10px;
width: 620px;
height: 590px;
text-align: justify;
font-size: 14px;
line-height: 18px;

}

maincontent .rect {

width: 580px;
background-color: #dbdddf;
margin-right: 10px;
padding: 15px;

}

maincontent .square {

width: 270px;
float: left;
min-height: 270px;
margin-top: 10px;
margin-right: 10px;
background-color: #c6c7c7;
padding: 15px;

}

footer {

background-color: #b1977f;
width: 880px;
font-size: 14px;
padding: 20px;
text-align: left;
color: #FFF;

}

HTML

   <div id="sidebar">
    <div class="box">
        </div>
    <div class="box">
        </div>
    </div>

<div id="maincontent">
    <div class="rect">
        </div>
    <div class="square">
        </div>
    <div class="square">

        </div>
    </div>

<div id="footer">
    </div>

Answer 1

Any chance you could get this hosted so we can actually see the problems? Try floating the footer left, and putting clear: both onto it.

Answer 2

Try a

clear:both;

on the content and

float:left;

on the footer

EDIT:

#footer {
background-color: #b1977f; 
width: 880px; 
font-size: 14px; 
padding: 20px; 
text-align: left; 
color: #FFF; 
float:left;
}

it DOES have the # on the CSS right?

Answer 3

You can 'take away' the float effect on one element and it's childs by using clear. It has 3 values: clear: left; for left floats, clear: right; for right floats and clear: both; for both, obviously.