3 column layout: floats in center column

jpw21683

01-22-2008, 08:35 PM

I'm currently in the process of a complete website redesign for my employer. A co-worker created the template in Photoshop, and I went about recreating it in XHTML w/CSS. However, we've come across a few problems as we've added content, and I've been able to fix them all except for this one.

First of all, for our template we wanted a 3-column layout, the left and right columns are fixed-width (in pixels). The center column, where the content goes, expands with the browser width. I tried several examples found on the web, but went with http://www.codeproject.com/KB/HTML/relatively_simple.aspx and made my own edits.

Both the left column (used for submenu items) and the right column (used for various widgets) are floated appropriately. The middle column is placed beneath the other columns in my HTML so it fits between.

However, on some pages I want two columns of info in the center column. I've wrapped each content block in a div, set display to block, appropriate width, and floated the div left/right. After the two divs, I've added an empty paragraph with the clear CSS property set to "both". I then list my next two divs, float them appropriately, rinse & repeat. In Internet Explorer 7, this produces the clean look I planned on.

However, in any other browser, the empty paragraph with "clear: both" clears the content in the left and right columns instead of the content in the center column! This is difficult to explain, so please refer to the following links:

Color-coded screenshot from IE7 (correct layout!): http://www.joshuapweiland.com/evpl/trouble-ie.jpg
Color-coded screenshot from Firefox 2.0 (incorrect!): http://www.joshuapweiland.com/evpl/trouble-ff.jpg

I've also set up a demo page you can preview in your browser to view the source. It's at http://www.joshuapweiland.com/evpl/index.html. Test it in IE and FF and you'll see what I mean. The CSS file is at http://www.joshuapweiland.com/evpl/css/main.v3.css.

I'd greatly appreciate any help I can get! I'm assuming that IE is actually at fault, but it's displaying it as I intended!!!

Thanks in advance,
Josh

Apostropartheid

01-22-2008, 08:41 PM

jpw21683

01-22-2008, 08:55 PM

I presume your content is lower down in the code than the two columns?
What I'd do is have a nice little wrapper div which automatically clears.
<div>
<div class="left">
<h2>Pearl's Picks</h2>
<p>I <em>really</em> am not gonna type this out. You get the point.
</div>
<div class="right">
<h2>National Book Awards</h2>
<p><strong>I'm not kidding.</strong></p>
</div>
</div>


Thanks for the suggestion! Unfortunately, I couldn't get it to work. If I remove the clearing paragraphs and wrap a left chunk and right chunk together in a wrapper div, the contained divs get jumbled up.

I'm not sure what you meant by "automatically clears". I also tried setting the wrapper div "display: block", hoping it would push the next wrapper div below it, but it didn't. If I set the wrapper divs to "clear: both", then they're all displayed below the right column content in FF.

So anytime I use the "clear" css property on an item in the center column, in browsers other than IE it clears past the content in the left and right columns, instead of just the content in the center column. Any other ideas?

Apostropartheid

01-22-2008, 09:13 PM

I got it, you just needed to float. Have a look.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Wrappers</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.wrap {
float: left;
width: 100%;
font: 0.9em/1.8 "Lucida Sans Unicode";
color: #fff;
margin-bottom: 1em;
}
.wrap .left {
float: left;
width: 50%;
background: #06c;
}
.wrap .right {
float: right;
width: 50%;
background: #39f;
}
p.wrap {
color: #333;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">
<h2>Pearl's Picks</h2>
<p>I <em>really</em> am not gonna type this out. You get the point.</p>
<p>Lorem ipsum dolor sit bloody amet. La la la la la la.</p>
<p>I'd like a pearl, actually.</p>
</div>
<div class="right">
<h2>National Book Awards</h2>
<p><strong>I'm not kidding.</strong></p>
</div>
</div>
<div class="wrap">
<div class="left">
<h2>Pearl's Picks</h2>
<p>I <em>really</em> am not gonna type this out. You get the point.</p>
<ul>
<li>Fluffballs</li>
<li>And cheese</li>
<li>Are awesome.</li>
</ul>
</div>
<div class="right">
<h2>National Book Awards</h2>
<p><strong>I'm not kidding.</strong></p>
</div>
</div>
<div class="wrap">
<div class="left">
<h2>Pearl's Picks</h2>
<p>I <em>really</em> am not gonna type this out. You get the point.</p>
</div>
<div class="right">
<h2>National Book Awards</h2>
<p><strong>I'm not kidding.</strong></p>
<ol>
<li lang="fr">Voulez-vous couchez avec moi ce soir?</li>
<li lang="fr">Oui, je veux coucher avec toi...</li>
</ol>
</div>
</div>
<p class="wrap">And here's some ‘cleared’ content to please you...</p>
</body>
</html>

jpw21683

01-22-2008, 09:53 PM

Thank you so much...that did the trick! :thumbsup: Just gotta fine-tune some margins and I'll be good to go.