In CSS, can I line up heights of inline-blocks?

Question

In CSS, can I line up heights of inline-blocks?

I thought by setting margins to 0 and height to auto, that the block would expand to fit the available space, but it still tightly wraps around the block.

.myclass {     display: inline-block;     margin: 0em;     padding: 1em;     height: auto;     border: solid; } 

http://jsfiddle.net/6NQDw/

I would like both boxes to be the same height, but want the div width/heights to be determined by their content, not specifying a width/height in pixels.

Is there some kind of padding/margin/alignment CSS or something like that that I can use?

Answer 1

You could use display:table-cell; if you require a pure CSS solution but do take note that it won't work in IE7 (I guess IE6 is by now completely forgotten).

.myclass {     display: table-cell;     margin: 0em;     padding: 1em;     height: auto;     border: solid; } 

Cross browser support for display:table-cell

Your best bet for achieving what you need is JavaScript however explicitly setting width of containers with dynamic content is almost always not the right way to solve the issue.