A bit of a famous question but I haven't been able to find an answer I like yet. Is there a decent way to get equal height columns using CSS, without resorting to:

• Using table cells...
  
• Javascript...
  
• Creating excessive padding and hiding overflow...
  
• Using background images to fake it...
  

?

 

Or if you think one of those methods is okay, convince me please.

I use background images to fake it. I create a container that has a background image [repeat-y] which defines the two columns with colour or border. Then within this container I have a left floated div and a right floated div and a clearfloat div at the end. As either one of the columns expand with content, the background image of the containing div does too, thereby giving the illusion of 2 column of equal height.

 

There's probably plenty of ways to do this though, so it'd be interested how other folk manage it.

I use background images to fake it. I create a container that has a background image [repeat-y] which defines the two columns with colour or border. Then within this container I have a left floated div and a right floated div and a clearfloat div at the end. As either one of the columns expand with content, the background image of the containing div does too, thereby giving the illusion of 2 column of equal height.

 

There's probably plenty of ways to do this though, so it'd be interested how other folk manage it.

 

that's exactly how I would do it

 

Wildo

I do exactly as above! http://www.alistapart.com/articles/fauxcolumns/

 

I don't no how i do things. lol I just write code.

 

I am yet to learn the real meaning of some CSS. I only really know the Syntax.

I use background images to fake it. I create a container that has a background image [repeat-y] which defines the two columns with colour or border. Then within this container I have a left floated div and a right floated div and a clearfloat div at the end. As either one of the columns expand with content, the background image of the containing div does too, thereby giving the illusion of 2 column of equal height.

 

There's probably plenty of ways to do this though, so it'd be interested how other folk manage it.

 

You make it sound easier than most so I may end up going in that direction. I just can't believe there isn't a CSS hack for this! It's the one thing I really, really wish they covered (I had a similar issue when lining up little boxes in the "Services" section of my current website).

Well a div is the height of it's content so using a container div with a repating background image is the best way to fake the equal height columns. It would be very difficult to maintain/control otherwise, especially with padding/margin as every browser displays text differently and every user has their own settings and so there would be no way of controlling the size of the content within each column and keeping things consistent.

In older browsers, i think IE 5 was the last, you were able to set a container div, with 2 divs inside, with say, a height of 98& or something, and then they would stick to the div, but it doesn't happen anymore. I think they forgot about the height stuff.