Recently I had a job that required two verticle columns to end at the same length and I had to do it using CSS. The left side was a side menu with a wider right column as the main content. They were to meet at a footer at the same depth.

Wow! – what a problem that turned into. It was the first time that I found myself not being able to use tables and I couldn’t find a solution anywhere. I searched Google and found many articles but none were a true solution.

There were many that used javascript to mathematically calculate the longest length and make the other the same lenght. Sounds great. I tried a few of the examples and none were compatible with the javascript already utilised in this project. I could have probably forund a JS solution but I was running out of time.

They all had CSS solutions that worked in SOME browsers and not others. Anyone that knows me knows that this is not a solution that I would accept. There were others that used CSS/Javascript/HTML/etc., tricks but were likely to fail in future html5 browsers so they too were ruled out.

Then it struck me.

I could make a wrapper div around the 2 columns and create FAUX COLUMNS with a graphic. I could use CSS to set the background of the wrapper to go from top to bottom and that way it would look like the colums ended at the same depth. I would then float each column left or right and position them correctly over the background column graphic.

faux columns end at same depth no matter what!

You will notice that the first image in the diagram above is my FAUX COMLUMNS background – so it is 100% wide and as thin as possible – the real one is only 1 pixel deep. Then it is made into a bkg and the results are shown above.

It works great and I can’t see one drawback from using this method. It is quick and simple and works. Having said that, if you have a better solution please post it here for all to see.