Nearly every website these days have columns. Since we have grown out of the old table days and into this new era of CSS we tend to over think certain things like how to create two columns side by side which can vary in height, but still appear to be the same height. The solution is so simple its rediculous. We start out with a left column and a right column(could be three columns.. this will work just as easily, but I’ll keep it simple), two div’s floating side by side via float:right; or float:left;. Next we add a left border to the right column, which is the same width and color as the left:

border-left: solid 150px #aaaaaa;

This will shove your right column out of line, but no worries, step three we slide it right back into place. With a negative left margin on the right column we can literally slide the right column back up under the left column:

margin-left: -150px;

So basically we added two lines of code to the independent columns, now it never matters which one is taller, they fill in for each other. A simple Example.

Be Sociable, Share!

Related posts:

  1. Coloring Columns and Rows on Tables with CSS3 and RGBA
  2. jQuery Powertable – Move, Show, Hide, Fix Table Columns
  3. Effective Example of CSS Media Queries
  4. Print Preview with CSS and Javascript
  5. 8 Steps to Great CSS