This example has flexible width for the right #content column between maximum and minimum limits which prevent the page becoming too wide with large window resolutions which might be 1920px wide. Max-width and min-width do not work in IE6. IE6 for this page has a fixed width. You can use width:expression for IE6 but it needs ActiveX which a viewer may have disabled and I found that it ceased to operate properly when the right content exceeded a certain amount so a fixed width is more reliable for IE6; (IE6 sometimes needs a refresh to get the columns aligned properly if it isn't correct after the first download). I have excluded the footer div from the max/min codes because I think it looks better if it always extends full width. The footer will stick to the window bottom when there is little content.
The right #content div must have more content height than the left side div.
The header is inside #container so you can edit the height of #header without problems but #footer is outside #container. If you want to change the height of #footer you have to edit the height and negative top margin of #footer and the height of #clearfooter.
See Backgrounds full height for IE6 for a three column example. It shows how the footer will stick to the window bottom when there is little content. The code for IE6 on that page has used width:expression to limit the maximum and minimum widths.
This code needs an additional #leftinner div of fixed width for the left column. It shows two columns formed with divs of different heights but the background-colors (or background-images) have been dragged down to the height of the div with the most height, in this case the #content div. The advantage of this method is that the div heights are flexible and backgrounds will expand down provided that the same div always has the most content to drag down the background of the other one.
This example shows a containing (parent) div #menu with no defined height. The background-color of the parent containing div will always show for the full height of the inner divs if it is given a height itself. It is normally best to give divs a height but sometimes this is not desirable if you want all divs to have flexible height to allow for the viewer using larger text size. If you want a flexible height to cater for larger text used by partially sighted people then beware of problems where Firefox and IE7 only create a div height as much as is necessary so a background may not extend as far as you would like, so you have to use special coding as shown here.
#content div (azure) { background-color: azure; padding: 20px; border: 0; margin: 0 0 0 240px; } has no width and no float, and is therefore flexible for any remaining width and moves into any space beside #leftinner div.
#menu p { margin: 0; padding-bottom: 8px; } is because top and bottom margins and padding were difficult to organise. A margin had the effect of creating a pink space above and below.
The html markup code for the two columns is:-
<div id="menu">
<div id="leftinner">...content...</div>
<div id="content">...content height must be more than in side div...</div>
</div><!--end of #menu-->
The style code for the two columns is:-
#menu { width: 100%; background-color: pink; float: left; padding: 0; margin: 0; }
#leftinner { width: 200px; float: left; border: 0; padding: 20px; margin: 0; }
#content { background-color: azure; padding: 20px; border: 0; margin: 0 0 0 240px; }
#menu p { margin: 0; padding-bottom: 8px; }
Code adapted from advice from shawnm and Agricola on WebDevForums
This page is ready to use; just change the content and background colors! There is no stylesheet, all styles are in the head section for convenience but I have shown the link code if you want to use a separate style sheet called style.css and add styles for links, etc. You can use a plain color or a background image in the divs, although they will have to repeat vertically to cope with a flexible height.
This example does not use the "faux-columns" method which uses a tiled background image. "Faux Columns" cannot use a color instead of an image and cannot deal with a flexible width.