Ladysign

CSS 2 floating columns and footer

Difficulty:

I think every webdeveloper who is developing websites according the W3C guidelines, is experiencing the crossbrowser div problem: floating div columns.

I agree, using html tables is pretty easy. But tables are there for displaying data in a table, not for designing your webpage!

The nasty thing about using div blocks, is when you are creating
both div columns, for Firefox and Internet Explorer multiple problems will occur.
Problems like, both columns are displayed under each other, instead of next each other. Or problems like the text breaks through the page footer. (overflow problem).

If you know what to do, it’s not that hard to create a nice layout.
Check my code for a 2 column page, with a footer:

- - - - - - - - - - - -
- columnX - - columnY -
- columnX - - columnY -
- columnX - - columnY -
- columnX - - columnY -
- - - - - - - - - - - -
-        Footer       -
- - - - - - - - - - - -

<div id="wrapper">
   <div id="columnX"></div>
   <div id="columnY"></div>
   <div id="footer"></div>
</div>

//start designing from x=0; y=0; point.
* { margin: 0; padding: 0; }

// Don not break the page when the content gets bigger
// set an overflow.
#wrapper {
 height: 100%;
 width: 100%;
 overflow: auto;
}

//You need to define a width, and set a left float.
#columnX{
  width: 650px;
  float: left;
}

//You need to define a width, and set a left float.
#columnY{
  width: 350px;
  float: right;
}

//Clear both column floats.
//Give the footer a min top margin, with the same value as
//the height, so the page will be always after the 2 columns.
#footer{
  height: 50px;
  width: 1000px;
  display: block;
  margin-top: -50px;
  clear: both;
}

So you’ll see, that did the trick.
Now when you want your layout centered in the middle of the screen,
you can use the following trick:

Add into the wrapper the following properties:

margin: 0 auto;

The “auto” value sets the page in the horizontal center of the screen.