You can put stuff here too! To ensure everything in this column has padding except for the links above I used negative margins on the unordered list. You can delete the padding in this div entirely if you'd like.

Equal Height Columns

The column colors will never break because I've used two wrapper divs with two different repeating background images (the column colors).

(This is the faux column method).

This is a simple solution to the quest for the 3 column liquid layout with equal column height. No negative margins, javascript, or hacks were used to create the equal height column effect!

About the Layout ::

This code uses floating lefthand and righthand columns within a liquid layout. The layout will stretch until it reaches 1300px at which point the site centers and a background color appears. This template was created by Ashley Walters and is in the public domain. You may use this template for any purpose. There is no obligation to link back although linking is always appreciated! ^_~

Template Specs

  • 3 Column Liquid Layout w/Footer
  • Equal Height Columns!
  • Top and Side Navigation
  • Cross Browser Compatability (tested in IE (6+), Firefox, Netscape, Opera, and Safari)
  • Semantic Validating Strict XHTML
  • Validating CSS
  • Hack Free! (does use conditional comments for IE)

Image Files

This template uses two images: bg.gif and bg2.gif. Both are 1px high and 200px wide and are being repeating vertically (using repeat-y). The appearance of the border on the side navigation comes from the image bg2.gif.

Template Limitations of IE 6 or less

Because so far only IE 7+ supports min-width or max-width this template will have noteable limitations in versions 6 or less. This template break if the window is narrowed too much. This template will also just keep on stretching. You may also be interested in other templates that overcome these problems.

Website Tips

Going to turn this into a website? Instead leaving the CSS embedded, I strongly recommend that you put the css in a separate file and link it to each page in the head of the xhtml document using: <link href="style.css" rel="stylesheet" media="screen" type="text/css" />. Don't forget to optimize your CSS! I also recommend separating this template into sections (like the navigational systems and the footer) and creating server-side includes for your website.