Two-column Contained Layout

[patenaudemat]

This is a problem I've been struggling with for awhile. Basically, I have two columns that I'm fitting into a 760px space. One column is a website's body, 525px, and the other is a sidebar, 210px. With 5px margins on the sides of each box, the spacing looks wonderful. But here's the problem.

These are placed in a containing block, but in order to position them properly, I have to remove them from document flow. This modifies the size of the containing block. This wouldn't be an issue, except that it's against a dark color background, and the containing block has a white background. Basically, I have two columns, and I need to be able to put a white background behind both of them extending down below whichever happens to be longer (I have no problem making it work if I know for a fact the main block will be longer... just don't absolutely position it... but I can't get the sidebar to move to the right of the page if I don't either absolutely position it, or use float, both of which remove it from the page flow).

Here's the code:

<div id="content">
<div id="sidebar">
Here's my sidebar stuff.
</div>

<div id="main">
Here's the page's main content.
</div>
</div>

Currently it's styled using this:

div#content {
width: 765px;
position: relative;
margin-left: auto;
margin-right: auto;
text-align: left;
background-color: #fff;
color: #000;
}
div#main {
width: 525px;
margin-left: 5px;
}
div#sidebar {
position: absolute;
width: 210px;
right: 5px;
}

(Previously, div#main was also absolutely positioned)

This looks fine as long as the content is longer than the sidebar, but how can I make it work when this is not the case?

For an example, visit http://www.mattpat.net/RIASP-new. The main page is how it looks when content is longer than sidebar, the About Us page is how it looks vice versa.

Thanks in advance!

-Matt

(PS, for the record, I am going to fix the shadows on the menu bar and spruce things up a bit, this was just a quick idea I had)

[KDLA]

Use a minimum height setting for the section you're worried about, setting it to the approximate length of your nav bar.

Reference: http://www.w3.org/TR/REC-CSS2/visudet.html#min-max-heights

[patenaudemat]

Works perfectly! (Even in IE6, which was quite a shock to me... I recall reading somewhere that IE ignores the min-height property... maybe I'm mistaken, or maybe it's because I have an XHTML 1.1 doctype, thus throwing it into "standards compliant" mode).

Thanks for the help!

-Matt

[KDLA]

Yes, you're right: IE does ignore the min-height setting; however IE usually stretches the page to the height of the screen anyway. Fx doesn't, that's why the min-height setting is needed.

IE ignoring settings -- what else is new??? ;)