Block-level elements within display: inline-block

Question

I\'m trying to put some (vertically-stacked) display:block elements within a display:inline-block element. According to the CSS specification, the inline-block element shoul

Answer 1

Well display: inline-block can be a bit tricky to get cross-browser. It will require at minimum, a few hacks and, for Firefox 2, potentially an extra element.

CSS

.inlineBlock { display: -moz-inline-stack; display: inline-block; zoom: 1; *display: inline; }

display: -moz-inline-stack is for Firefox 2. All the immediate children will need to have display: block or otherwise be block level elements. Note if you need your inline-block element to shrink wrap I think you can use display: -moz-inline-box instead.

zoom: 1 gives hasLayout to the element (for IE 7 and below). Part 1 of the hack needed for IE7 and below compatibilty.

**display: inline* is a hack second part of the hack needed for IE7 and below compatibility.

I occasionally need to add overflow: hidden for IE compatibility as well.

For your specific situation i think what you need is:

  
Left
Right
Right 2