View Full Version : Keep two adjacent divs the same height?

10-20-2004, 04:51 PM
See the two boxes on this page: http://offtone.com/v2/index.php

I'd definately prefer them to be the same height as each other. Unfortunately, CSS is useless when it comes to dealing with pretty much anything on the vertical axis, so height settings of 100% are ignored.

Very frustrating. However, I was hoping someone here maybe has a solution? Were it just two simple columns, I'd use the old background thing... But these are two seperate containers, with backgrounds of their own for effect and whatnot.

Thanks for any suggestions,

10-20-2004, 05:32 PM
Right now I'm using JS to pull it off... I don't like JS... Guess if the JS fails, people will just see the uneven heights, which isn't really that bad.

10-20-2004, 06:11 PM
You can manually set the height of each div to be identical.

If you are going to do that and you will have variable sized content going into the divs you may also want to set up scrolling to occur in the div in case content exceeds the height.

10-20-2004, 08:00 PM
Scrolling isn't really an option, as the style on scrollbars is variable across operating systems and even browsers, and none of them would look good :P

I think the JS solution will suffice for now, but would be nice to do it with CSS, as it shouldn't be javascript's job to do this.


Edit: The JS method's only downfall seems to be that using fixed heights on the container doesn't facilitate font scaling... Does in IE though, thanks to its weird interpretation of fixed heights as min-height.

Actually, the solution may lie in that... Heh. I'll set min-height for !IE, and height for IE :)

10-21-2004, 08:08 AM
Mozilla/Netscape is the only browser to support min-height (Safari 1.2 might, but seeing as how I don't have access to it, I cannot test it).

I would suggest using background-images and floats seeing as how your columns are fixed width. If I want to use min-height, (for example, at http://www.customgardenbuilders.com/) I cheat, and add a 1px wide div.

10-21-2004, 02:40 PM
Well they ought to. I don't think I'll add another DIV to the markup like that, as the effect really isn't THAT bad if they're different heights. I'm sure those browsers will support min-height soon enough, and I'd like to think that the majority of non IE users are the type to keep up with browser versions (unless Safari comes installed on the Mac, but perhaps Mac users deserve more credit than Windows users :P)