Colored background not extending down

My website currently isn't up but here is a picture of the problem I'm having
http://i51.tinypic.com/2lu3sxu.jpg
Im testing in Firefox 5


The white background for the content should extend all the way down to the black footer and I'm unsure as to why it isn't. Ideally the area marked as contact us will be a short form in which the background color will be changed and a header added but the main content area will remain white and the entire area should have an overall white background.

Here is the HTML code, the relevant section starts at
<div id="Content">

http://www.text-upload.com/read.php?id=113565&c=2506646

Here is the css code
http://www.text-upload.com/read.php?id=113564&c=3359723

Any help would be appreciated, thanks

you need to clear your floats

try this:


<div class="container">
<div style="float: left;">Fighting for your rights...</div>
<div style="float: right;">Contact us on this form...</div>
<div style="clear: both;"></div>
</div>

Thanks that works. This is my first time not using tables, so was I just missing an extra div at the bottom to line everything up again and have to clear that every time? Just want to make sure for future reference.

no you actually should set a height to the container.

you see, when you float objects, you take them out of the "flow of the page" therefore they really aren't there anymore (they dont take up any space). so by setting a height to the container, you are "clearing" space for the elements


.container { height: 80px; }


---


.clear { clear: both; }

you should use <div class="clear"></div> when there isn't a height (ie: the content is increasing regularly (blogs, comments, any user-input type of stuff)) or when you feel lazy :P

Aw ok thank you again

text that is regularly expanding, you would use clear.


clear: left;
clear: right;
clear: both;
clear: all;


you can also choose what elements you want to clear space for. sometimes you dont want to clear space for one object but you do for another. for instance if you wanted your contact us... part not part of the page, you would use clear:left; to clear just the left float. clearing basically gives an elements its space back on the page. why would you not want something not part of the page? im not really sure