How to keep 2-column depths matched?

Is there a better way than using <br /> to match up columns?

[shorehugger]

This has probably been covered one way or another but my search didn't find the answer I'm looking for. I'm using an external CSS with a two-column layout. Navigation links run across the top of the page. I edit the web site frequently, particularly the home page. I like to have the two columns match up but usually, one column has more content than the other. I have used <br /> to expand the short column to match the longer one. That works fine but I'm sure there's a more efficient way to do that. I'm open to suggestions.

[MichaelBluejay]

Much as the CSS junkies like to say there's no reason to use tables, here's yet another example of something that's *easy* to do with tables (in fact, it's automatic), but is not so obvious in CSS -- so much so that someone has to make a forum post about it.

I'm sure there's some CSS kludge that makes it work, but I'm afraid I don't know what it is.

[httpwebwitch]

Look at the problem another way: why do you need the content of the two columns to have the same height? I'm assuming you have a visual effect in which the columns have different background colors, perhaps with a footer along the bottom?

Have you tried using a tiled background on a conatiner div, with two floated columns within it?

SuzyUK has assembled our favourite CSS layouts all in one place:
[webmasterworld.com...]

your instinct is right: adding <br>s to your content is ugly. The answer might be in SuzyUK's collection, or elsewhere on the web.

[httpwebwitch]

oh, beware of techniques that use negative margins. It has recently been found that negative margins crash IE when you attempt to print the page

[shorehugger]

Thanks for the info. I'll peruse it and hopefully find a good solution.