Hi, I'm looking for a solution to get three different boxes to have the same length in CSS, based on the one with most content.

In order to make myself more clear, here's a demo on my problem:

 

http://idmedia.no/demo/

 

I want the other two boxes on the side to have the same height as the one in the middle, is that somehow possible without a px-value? I still want them to scale depending on the content.

 

If anyone would like to give me a hand, I've zipped the files (including images): http://idmedia.no/demo/demo.zip

 

Thanks

Hi there, quite a common question.

Take a look here for a workaround.

Hi there, quite a common question.

Take a look here for a workaround.

Thanks for suggestion. I know about Faux, but I've not been able to get it to work as I'm using round corners at the end of the boxes...

 

Another problem is that if I scale the browser windows horizontally (make it wider or smaller), the background doesn't fit very well anymore...

Backgrounds scale fine for me, and faux columns with work. Keep at it.

Backgrounds scale fine for me, and faux columns with work. Keep at it.

Bothered to give it a try on my example? I would highly appreciate it...

I don't think faux columns would work in this case because your columns are changing widths as the user resizes the browsers. This is an interesting problem. Please let us know when you found a solution. As I am curious to know how it is does as well.

There's a javascript solution you could try - http://www.filamentgroup.com/lab/setting_equal_heights_with_jquery/

Look at items 17 and 19 http://www.wickham43.net/firefoxbackground.php

 

Item 17a is fixed width but 17b is flexible width.

 

Item 19 is two columns but can be adapted for three columns.

 

Item 18 is the faux columns method.