html - Clearing inline-blocks?

Question

I have

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

Then

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

I only want one max per line, is this actually possible somehow? It's an iPhone HTML5 app so older browser restrictions aren't an issue.

Answer 1

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.