0

I've been tinkering with this for an hour now and can't quite get it to work.

Basically I have two div elements I want to align next to each other and I want them to be the same height. The height of the second element should match the first since the first can have 1-3 lines of text.

See the HTML below and this link for a pic of the current output.

http://i55.tinypic.com/2ajozgw.jpg

Sorry for the inline CSS, plan on taking it out once I get it right.

            <div style="width:450px;margin:0px auto;">
                <div style="width:90%;-moz-border-radius-bottomleft:8px;-moz-border-radius-topleft:8px;border-left:2px solid #606060;border-top:2px solid #606060;border-bottom:2px solid #606060;border-right:1px solid #606060;padding:10px;font-size:0.9em;float:left;">
                    CATEGORY<br />
                    Test
                 </div>
                <div style="width:10%;background-color:#000000;text-align:center;-moz-border-radius-bottomright:8px;-moz-border-radius-topright:8px;border-top:2px solid #606060;border-bottom:2px solid #606060;border-right:1px solid #606060;padding:10px;float:left;">
                        9
                </div>      
            </div>
Tom
  • 4,467
  • 17
  • 59
  • 91
  • There are many questions on SO concerning equal height columns using css, for example: http://stackoverflow.com/questions/2114757/css-equal-height-columns – jeroen Apr 14 '11 at 16:35
  • This question's been asked before, hasn't it? See this: http://stackoverflow.com/questions/1056212/how-do-i-achieve-equal-height-divs-with-html-css – jlmcdonald Apr 14 '11 at 16:35

2 Answers2

3

Try this (i removed round corners):

<div style="width:400px; position:relative">
    <div style="width:350px; border: solid 1px black">
        CATEGORY<br>
        Test<br/>
        Test<br/>
        Test<br/>
        Test<br/>
    </div>
    <div style="width:50px;position: absolute; top:0px; right:0px; bottom:0px; background: black;">
    9
    </div>      
</div>

This is how it looks like: http://i52.tinypic.com/2zisndt.png

mabn
  • 2,473
  • 1
  • 26
  • 47
  • +1 Nice one, I wonder how the IE compatibility is (I think older versions don´t like `right` and `bottom`). – jeroen Apr 14 '11 at 16:49
  • This works great, and works in IE7 and up. Any idea how I can vertically align the second element? vertical-align:middle doesn't seem to work =( – Tom Apr 14 '11 at 16:53
1

The easy solution would be to put this into a table that has one row and two cells. The cells get automatically the same height, and you can make the DIV to span the whole cell.

Antti Huima
  • 25,136
  • 3
  • 52
  • 71
  • **NO!!! TABLES ARE BAD!** Tables are *depreciated*! They can't even be used to display tabular data. I'd downvote, but this isn't a bad answer ;) – Blender Apr 14 '11 at 16:39
  • @Blender Although I agree that tables shouldn´t be used for layout, they are definitely the right choice for displaying tabular data. **Tables rock for tabular data!** ;-) – jeroen Apr 14 '11 at 16:47
  • I was going to use a table but they don't play well with rounded corners. – Tom Apr 14 '11 at 16:51
  • @Tom Depending on your browser needs, you can resort to `display:table-cell`. – jeroen Apr 14 '11 at 16:53
  • @Tom Yes, that would work in IE8 and higher, see http://www.quirksmode.org/css/display.html – jeroen Apr 14 '11 at 16:57