# goog.style.setInlineBlock in standards mode

This is a demonstration of the `goog-inline-block` CSS style. This page is in standards mode. Click here for quirks mode.

Hey, are these really
DIV
s inlined in my text here? I mean, I thought
DIV
s were block-level elements, and you couldn't inline them... Must be that new
goog-inline-block
style... (Hint: Try resizing the window to see the
DIV
s flow naturally.) Arv asked for an inline-block DIV with more interesting contents, so here goes:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec rhoncus neque ut neque porta consequat. In tincidunt tellus vehicula tellus. Etiam ornare nunc vel lectus. Vivamus quis nibh. Sed nunc. On FF1.5 and FF2.0, you need to wrap the contents of your inline-block element in a DIV or P with fixed width to get line wrapping.

These are SPANs with the goog-inline-block style applied, so you can style them like block-level elements. For example, give them 10px margin, a 10px border, or 10px padding. I used vertical-align: middle to make them all line up reasonably well. (Except on Safari 2. Go figure.)

This is what the same content looks like without goog-inline-block:

These are SPANs with the goog-inline-block style applied, so you can style them like block-level elements. For example, give them 10px margin, a 10px border, or 10px padding. I used vertical-align: middle to make them all line up reasonably well. (Except on Safari 2. Go figure.)

Click here to use `goog.style.setInlineBlock()` to apply the inline-block style to these SPANs.

Works on Internet Explorer 6 & 7, Firefox 1.5, 2.0 & 3.0 Beta, Safari 2 & 3, Webkit nightlies, and Opera 9. Note: DIVs nested in SPANs don't work on Opera.