Clearing inline-blocks?

Question

I have

.centered-holder {
    margin-left: auto;
    margin-right: auto;
    clear: left;
    display: inline-block;
}

Then

&l         


        

Answer 1

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).

Answer 2

Or you can just add a single div with display block after the inline-blocks.

.centered-holder {
    margin-left: auto;
    margin-right: auto;
    clear: left;
    display: inline-block;
}
.clear-inline {
    display: block;
}

Then

<div class="centered-holder">misc content 1</div>
<div class="clear-inline"></div>
<div class="centered-holder">misc content 2</div>
<div class="clear-inline"></div>
<div class="centered-holder">misc content 3</div>
<div class="clear-inline"></div>

Answer 3

If you remove display: inline-block; they will stack one on top of the other.

Block-level elements begin on a new line, and a DIV is block-level by default.

Answer 4

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.