Div height

[doddsey_65]

No matter what i do i cant get my icon div to be the same height as the rest of the divs in the row.

 

My code is:

 

<div class="forum_row">
<div class="icon">
<p class="icon">
SOME TEXT
</p>
</div>

 

and my css is:

 

div.forum_row {
width: 99.3%;
display:inline-block;
height:auto;
}

div.icon {
width:4%;
height:inherit;
float:left;
margin-top:5px;
margin-right: 5px;
border:1px solid #888;
background: #b0bde2;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:5px;
}

p.icon {
height:100%;
}

 

but the icon div is never the full height of the forum row. In needs to be as there are other divs inside forum_row div which are variable in height and can push the forum div beyond its normal height. So i need the icon div to go with it.

 

Any ideas?

[SuperBlue]

I wouldn't personally go for equal heights, with variable width columns. Its plain nasty with CSS and divisions alone, and way more complicated, then just throwing in a table and be done with it. Nevertheless, you may want to read: Equal Height Columns

 

Avoid using fancy stuff like display:inline-block; I've experimented a lot with the display property, with my early layouts. It rarely works as you intend, and the rules are sometimes a bit to exotic. May be better with IE8, but then you might be looking for display:table; or something like that.

 

I'd much rather use a hack currently, but i haven't really worked with that type of layout for some time. I tend to work around stuff, until i got a real reliable approach.