Why is my container Div not containing?

CSS layout div and nested divs

[douger9999]

Hi all

I have designed a site with tables, which I am now trying to convert to tableless CSS (PHEW!)

What I have is
<div id="Container">
<div id="Header">Header content</div>
<div id="maincontent"> Main page content (all within nested divs)
<div id="Menu">Menu links</div>
<div id="Pagecontent">Main page text</div>
<div id="right">Illustrations</div>
</div>
<div id="Footer">footer content</div>
</div>

The container div is centred with
#container {text-align:left; margin: 0 auto; width: 750px;}

The maincontent div is there to provide a background color for the main content of the page. The main content of the page is within nested DIVs.

The probem I have is that the background color of the page, provided by the background color of the Maincontent DIV doesn't extend down the page, as text/images are added to the nested divs within the maincontent div.

[snip]

Many thanks

Doug

[edited by: createErrorMsg at 8:04 pm (utc) on Sep. 30, 2005]
[edit reason] No URLs please. See forum charter for details. [/edit]

[dibbern2]

I'm surely not an expert like many of the posters to this forum, but I noticed you weren't getting any replies, and I'll try to help.

Your answer might be found in an article at A List Apart. Try searching Google for "Practical CSS Layout Tips, Tricks, & Techniques". It should take you to an artricle by Mark Newhouse. (It would be alot easier to post the link, but I believe that's a violation of TOS around here.)

Good luck.