Fluid content area and fixed width sidebar with cleared footer

HTML & CSS
1

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="wrapper">
	<div class="header">Header are goes here with site title and tagline.</div>
	<div class="main">
		<div class="content">
			<h1 class="posttitle">Home</h1>
			<div class="entry">
				<p>Welcome to our website. This is the home page content.</p> 
			</div>
		</div>
		<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">&nbsp;</div>
	</div>
</div>
2

You could do it like this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.main {
    width:100%;
    overflow:hidden;
    clear:both;
}
.content {
    float:right;
    width:100%;
    margin-left:-180px;
}
.content h1, .content .entry {
    margin-left:180px;
    zoom:1.0;
    overflow:hidden;
}
.sidebar {
    float:left;
    width:180px;
    background:red;
    height:400px;/* just for testing */
}
.clear {
    clear:both;
    background:green;
    width:100%;
}
</style>
</head>
<body>
<div class="wrapper">
    <div class="header">Header are goes here with site title and tagline.</div>
    <div class="main">
        <div class="content">
            <h1 class="posttitle">Home</h1>
            <div class="entry">
                <p>Welcome to our website. This is the home page content.</p>
            </div>
        </div>
        <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">test cleared element</div>
    </div>
</div>
</body>
</html>

The content is floated right at 100% width with a negative margin on the left side that allows the following floated sidebar to rise up into the vacuum caused by the negative margin. Then the inner content is kept clear of the vacuum by a positive margin.

3

Saaa-Weeeeet!

I’d never have guessed about the negative left margin. That’s a nice one :slight_smile:

Thanks Paul!