3 Column Layout with Float and Clear in Center Column

I am having problems clearing a floated object in the center column of a 3 col layout. The 3 col layout has floating left/right columns. In the center I am floating a div to the left. When I attempt to clear the object in the center it attempts to clear the left column instead. I give up. Please help

Sample code is posted below:

<!DOCTYPE html>
   div { padding: 10px; }
   #main { width: 500px; background-color: green; }
   #leftcol { float: left; width: 100px; height: 175px; background-color: Yellow; }
   #rightcol { float: right; width: 100px; height: 300px; background-color: Orange; }
   #centercol { margin-left: 120px; margin-right: 120px; background-color: White; }
   #centerGrayBox { float: left; width: 75px; height: 100px;  background: grey; display: block; }
   #centerBlueBox { clear: left; background-color: Blue; }
   #bottomBox { clear: both; background-color: Purple; }
<h2>Basic 3 col layout</h2>
<div id="main">
   <div id="leftCol">
      float: left;<br />
      width: 100px<br />
   <div id="rightCol">
      float: right;<br />
      width: 100px<br />
   <div id="centerCol">
      #centerCol<br />
      <div id="centerGrayBox">
        float: left;<br />
        width: 75px;
      i want to clear the grey box so the next div is right under it.
   <div id="centerBlueBox">
      clear:left puts this box too far down...I want this div to be right under the grey one!
<div id="bottomBox">#bottomBox (clear: both)</div>

Screen Shot:


You’re rendering in quirks mode. I’d fix that first. Add a doctype.

Anyone have any ideas how to fix this one?

Hi, Action Jackson. Welcome to the forums. :slight_smile:

Which browser(s) are you using? I’ve tested it in Firefox8 and Chromium on Linux, and it seems to be doing exactly what you want i.e. the blue div sits immediately under the grey div, with no space in between. Your screen-shot is still pending approval, so maybe I’ve misunderstood the problem.

Isn’t <!DOCTYPE html> an HTML5 doctype?


When you clear a float you clear all floats above it in the html which in your case is the floated left column so the element moves down below the left column just as you told it to do :). To contain the effect of the clear property the element must have a parent that establishes a new block formatting context. Elements which create block formatting contexts are floats, elements with overflow other than visible, elements with display:inline-block or table-cells.

The easiest solution in your case is to add an inner 100% wide floated element in the middle column to contain all the content in that column and to stop the clear affecting floats outside that current context.


<div id="centercol">
 <div class="inner">
  <p>content here</p>

You can do it without an extra div by using overflow:hidden on your centre column (and applying haslayout for IE6) but does mean that overflowing content may be hidden and possible a scroll bar may not appear when needed.

This old demo explains the problem and shows the solution.

The OPs demo is flawed as they have used camelCase in the html so the demo isn’t working unless you change the classes to match the css :slight_smile:

Ah - that will teach me not to try these things on only one cup of coffee. :lol:

Yes, but I don’t think it was there originally. See the same question on another forum.

I believe that the lack of doctype originally allowed the camelCased markup to work with the non-camelCased styling.