View Full Version : Making floating divs the same height

09-15-2011, 01:28 AM
I'm wondering if anyone knows a good method of making multiple floating divs the same height.

I'm actually not all so concerned about them being the same height, but rather, I'd like to make a two column layout, giving both columns a border, and it doesn't look right at all if they are both different sizes. I'm floating both, but given both columns content are user generated, I don't know what height they will be, so I can't set sizes.

The only method I can think of is to basically play visual games by wrapping them in a clearfix container with a background image simulating the side borders and bottom borders, and giving the two columns top borders. Any other methods?

09-15-2011, 03:49 AM
I believe you may find this helpful.


09-15-2011, 04:34 AM
To the best of my knowledge, faux columns won't work, as I'm trying to create actual borders around the divs. As I proposed, I could use the faux column technique to mimic having given borders, but its far from ideal. I'm hoping to see if there are any other solutions.

09-15-2011, 04:47 AM
Why wouldn't the background image technique work as suggested in the link above? The background image could be designed so as to appear to have a left and right border on their respective element. Then you'd just need to work out a top and bottom border, which wouldn't be hard.

09-15-2011, 04:47 PM
I'm not saying it wouldn't work, I'm saying its something I've already considered. And actually, the bottom borders would be hard if the columns aren't actually the same height :P

I was curious if there were any more direct methods.

09-15-2011, 05:11 PM
sure use javascript to determine the heights of all the elements, then set them all to the height of the highest result.

09-16-2011, 03:01 AM
Ah, yah, didn't think of JS. But basically I'm guessing no real method without JS to manipulate it. Hopefully they develop the css table properties further, or a technique comes together to do this without needing scripting.