Clearing inline-blocks?

Depend of your CSS declarations and your markup, but you can try to put this CSS declaration on the parent container:

white-space: pre-line;

With this approach you avoid to transform the .centered-holder to a block element, and you can still use for example the text-align:center on the parent container.

pre-line - This value will cause sequences of whitespace to collapse into a single space character. Line breaks will occur wherever necessary to fill line boxes, and at new lines in the markup (or at occurrences of "\a" in generated content). In other words, it’s like normal except that it’ll honor explicit line breaks.

You can find more informations here about white-space:

  • http://reference.sitepoint.com/css/white-space
  • http://www.w3.org/TR/css3-text/#white-space

To finish, you can use these CSS declarations :

.parent-container {
    white-space: pre-line /* Create new line for each DIV */;
    line-height:0 /* Mask the extra lines */;
    *white-space: pre /*FixIE7*/;
    *word-wrap: break-word /*FixIE7*/;
}

.centered-holder {
    display: inline-block;
    line-height:100% /* Restore a default line-height */;
    *display: inline /*FixIE7*/;
    *zoom: 1 /*FixIE7*/;
}

I found this question very interesting, so I give also the CSS declarations for IE6-7 (pre-line and inline-block fixes). It should be usefull for some other people which have a similar problem.


Changing display:inline-block to display:table may do the trick.

By default, a table clears it's sibling elements (like a block div), and it's width expands to fit it's content (like an inline div).

Tags:

Html

Css

Recent Posts