Fluid content area and fixed width sidebar with cleared footer

**Scott Blanchard** · Jun 13, 2011 09:23

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.

HTML Code:

<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>

**Paul O'B** · Jun 13, 2011 10:43

You could do it like this:

Code:

<!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.

**Scott Blanchard** · Jun 13, 2011 13:00

Saaa-Weeeeet!

I'd never have guessed about the negative left margin. That's a nice one :-)

Thanks Paul!

User Tag List

Thread: Fluid content area and fixed width sidebar with cleared footer

Thread Tools

Display

Fluid content area and fixed width sidebar with cleared footer

Bookmarks

Bookmarks

Posting Permissions