Mon 3 Dec 2007
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.

December 4th, 2007 at 7:06 am
[...] Variable Columns with CSS [...]
December 9th, 2007 at 5:16 pm
This works perfectly if the right column is longer than the left. But if the left is longer, the columns appear unequal heights. Any ideas how to handle this?
December 9th, 2007 at 8:29 pm
Well I guess the one small catch is one column has to have the same background as its container(the column with the border should), so you can’t tell it ends. A little misleading but it should still work in most cases.