display:block inside display:inline

Question

I want to understand what happens when an element whose CSS is display:block is a DOM child of an element whose CSS is display:inline (so that the

Answer 1

An inline container cannot contain a block container. The usual result when such a thing occurs is that the inline container is converted to block in order to accommodate its contents. If you need a container that appears inline to contain something that appears to be a block use the following:

display: inline-block;

inline-block property is a display mode that positions the container in an inline fashion with the immediately properties and definitions of an inline container applied to only the container itself without limiting its children to such constraints. The result is that a block container child of a inline-block parent is confined to the dimensions of the parent if the parent has defined definitions or may cause the parents dimensions to stretch to accommodate a larger child. A container set to inline-block can receive properties only afforded to blocks, such as width or height, without loosing the default positioning associated with an inline container.

That property is not supported by FF2, and as a result is not supported by Ice Weasel browser. Nearly every other browser supports that property including IE6, so you should be fine to use it since almost nobody is using FF2 or Ice Weasel except for a minor of users confined to out of the box Linux distributions.