Question

I have a div with 2 divs in it with display: inline-block
since their height is not the same I use vertical-align: top to make them aligned to the top border instead of the bottom.
In modern browsers it works fine but in IE7 the inner divs get pushed way beyond the width of the page, any ideas why?

UPDATE: http://jsfiddle.net/DE46Z/
I need all the elements to be aligned to the top, In IE7 the vertical-align top does not work

Answer 1

IE7 does not understand inline-block.

Add this to your css:

.myclass {
    zoom: 1; // will trigger 'hasLayout'
    *display: inline;  // the '*' will target IE7 only
}

Check this article on the subject, it’s pretty complete