4 column CSS layout - Fluid

Question

I'm going around in circles trying to figure this out.

HTML/CSS:

<style type='text/css'>

#content {
    padding: 20px;
    background: #F3F6F7;
}

.inner-box {
    background: #fff;
}

.inner-box .col {
    background:#eee;
    display:block;
    float:left;
    margin:1%;
    padding:20px;
    width:23%;
}

</style>

<div id="content">      
    <div class="inner-box clearfix">
        <div class="col col-1">
            COl1
        </div>
        <div class="col col-2">
            COl2
        </div>
        <div class="col col-3">
            COl3
        </div>
        <div class="col col-4">
          COl4
        </div>

    </div>              
</div>    

I basically want a fluid 4 column layout with an equal bit of padding around each column and the whole thing to span 100% across the screen.

The code above works but as soon as i scale the browser the 4th column on the right will shift down under the rest.

Solution 1

Personally I've given up on using floats. I find them too temperamental to work with.

I now use display: inline-block; in the place of floats. Note that IE7 and below doesn't support this, but there is an exceptional css hack that works perfectly. Use conditional comments and a separate CSS file for IE7 and below.

The Cross-browser Inline-Block hack is fantastic for getting around this.

For all of my projects, I define an inline-block class.

.inline-block
{
    display: inline-block;
}

and in the IE CSS file, I have:

.inline-block
{
    zoom: 1;
    *display: inline;
}

You can then layout any fluid layouts easy, placing the divs side-by-side and setting a percentage width for each one. I usually define a class that denotes a fixed percentage width

.twenty-five-perc
{
    width: 25%;
}

So your resulting html might look like this:

<div>
    <div class="inline-block twenty-five-perc">
    </div><div class="inline-block twenty-five-perc">
    </div><div class="inline-block twenty-five-perc">
    </div><div class="inline-block twenty-five-perc">
    </div>
</div>

Now you might wondering why I have the opening div tags on the same line as the previous closing tag. This is because inline-block respects whitespace and this will break the layout. You can read more about this issue and ways to mitigate it here: http://www.lifeathighroad.com/web-development/css-web-development/inline-block-whitespace-workaround/

Fair bit of rambling here, but the upshot is You can do really nice fluid layouts without having to dick around with float layouts.

Solution 2

A few thoughts.

First, you don't need the clearfix div. Using overflow:hidden on #content is a better way to handle this. So your HTML looks like this:

<div id="content">      
    <div class="col col-1">
        COl1
    </div>
    <div class="col col-2">
        COl2
    </div>
    <div class="col col-3">
        COl3
    </div>
    <div class="col col-4">
      COl4
    </div>             
</div>

That's cleaner. Secondly, divs are block-level elements, so display:block; is unnecessary.

Also, unless you use flexible units for your gutters, you'll run into a problem when the viewport becomes smaller than your column percentages allow. I would suggest using percentages for the gutters. Remember that percentages are percentages in relation to the parent element, so .col will be a percentage of #content.

Since you're using floats and each column has its own class available, it's easy to add the gutter as a right-margin, and set it to 0 on the last one.

So not only is your markup simpler, but the CSS as well:

content {
  padding: 20px;
  background: #F3F6F7;
  overflow:hidden;
  }
.col {
  background:#eee;
  float:left;
  width:22%;
  margin-right: 4%;
  }
.col-4 {margin-right:0;}

Also note how (22% * 4) + (4% * 3) = 100%.

Hope this helps. See http://jsfiddle.net/D759g/ for a working example.

Solution 3

I would use absolute positioning in this layout. In my opinion the most reliable solution. Plus you can change the padding without breaking your layout. Plus you can add border and margin, no problem.

/* assuming your html is under the body tag */
html, body, #content, .inner-box { margin: 0px; height: 100%; }

.inner-box { position: relative; }

.col {
  position: absolute;
  top: 0px; bottom: 0px;
  padding: 1%;
  border: 1px solid black;
}

.col-1 { left: 0%; right: 75%; }

.col-2 { left: 25%; right: 50%; }

.col-3 { left: 50%; right: 25%; }

.col-4 { left: 75%; right: 0%; }

note that the left value of a column and the right value of the previous column always add up to 100%

NOTE: this doesn't work in ie6.