9

In the following code I would like the div with 'y' to match the height of the div with the 3 'x's.

<div style="border: 0px solid red; margin: 0px 0px 5px; overflow: hidden;">
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; background-color: rgb(30, 23, 22); width: 312px; float: left;">
    x<br/>x<br/>x
</div>
<div style="border: 1px solid rgb(129, 11, 0); margin: 0px; padding: 5px; width: 312px; background-color: rgb(30, 23, 22); float: right;">
    y
</div>

Things to note are the inner divs are floating.

mskfisher
  • 3,291
  • 4
  • 35
  • 48
Jase Whatson
  • 4,179
  • 5
  • 36
  • 45

3 Answers3

12

There was a solution I saw at A List Apart (I think), where you give the two inner columns a huge bottom padding, but the same huge value as a negative margin. This all works as long as the column is not more than 32000px high, which is rare. Something like:

.col {
  float: left;
  padding-bottom: 32000px;
  margin-bottom: -32000px;
}

...where "col" is the class name for any column. You can then style individual columns however you like with a separate class.

<div class="col xxx">x<br />x<br />x</div>
<div class="col yyy">y</div>

Another option is to use a background image on the outer div, including your borders etc. This approach obviously means it's a little more difficult to changes the columns (widths, colors) once set up.

DisgruntledGoat
  • 70,219
  • 68
  • 205
  • 290
  • 1
    After I set `overflow: hidden` on the container this worked for me (IE 7-9 & FF). – mlhDev Apr 17 '13 at 14:54
  • 3
    Very nice, but not quite there! If I apply a border or rounded corners to the inner divs, that is chopped off at the bottom. – emrys57 Jul 05 '13 at 10:54
5

You have three options.

  1. Make the inner divs both as high as the outer div. This isn't too hard;
  2. Put the inner divs inside another div and try and use height and/or min-height 100% to make them as high as the containing div although I suspect this won't work as the containing div will probably stretch to the height of its containing div or the page. It might be worth a shot though; or, easiest of all
  3. Use tables. This problem is trivial with tables. It's a good example of pure CSS deficiencies.

There is no simple way to two divs "share" height. Tricks like 100% height have cross-browser issues both in terms of the CSS attributes you need to use and with borders, which you are using. Borders are typically in addition to any height that you use.

Some might say use display: table-cell but support for that is rather limited (on IE).

cletus
  • 616,129
  • 168
  • 910
  • 942
  • -1 for tables - this isn't accessible as you are using semantic markup for purely visual hacks. Screen reader users will be very upset. – Damian Keeghan Nov 19 '12 at 22:12
  • Tables are not a good option when using media queries. If I have a 4x3 grid that I want to scale down to 3x4 and then 2x6, the tables will not work. – andrewtweber Apr 05 '13 at 18:01
3

If you're not adverse to a spot of jQuery, you can use EqualHeight, it should do what you want

Dan F
  • 11,958
  • 3
  • 48
  • 72
  • Although I hate to use Javascript for this kind of thing this is suitable because the project is already using JQuery. – Jase Whatson May 20 '09 at 01:42
  • 1
    This may have worked when the answer was chosen, but it doesn't work at all with later versions of jQuery. a) `$.browser.msie` no longer exists (change to `$.support.boxModel`), b) It sets a min-height, which fails if you already have a min-height set in CSS which is taller (how that even happens, I don't know). Even with those 2 things fixed, it's not setting the heights correctly. – andrewtweber Apr 05 '13 at 18:14