I'm creating a stylesheet for my layout below to emulate the layout of Wikipedia.com, with the sidebar floated to the left of the content.
However, unless I fix the width of the content area, or absolutely position the sidebar (and assign a margin-left wide enough to clear the sidebar width), I can't seem to find a solution in css alone. The latter option has positioning issues with clearing the footer when the sidebar height exceeds the content height.
Any ideas on how I could create the 2 column effect with this layout (and still clear the footer element)? I can't change the markup or order of layout elements, I have to do it all with css.
<div class="header">Header are goes here with site title and tagline.</div>
<p>Welcome to our website. This is the home page content.</p>
<div class="sidebar">Sidebar content will go here. This element should be floated to the left of the content div and width set to 180px</div>
<div class="clear"> </div>