Css: Clear on Inline Elements

CSS: clear on inline elements

It's simple: clear only applies to block-level elements.

'clear'

Applies to: block-level elements

Block-level elements are defined as

Block-level elements are those elements of the source document that
are formatted visually as blocks (e.g., paragraphs). The following
values of the display property make an element block-level: block,
list-item, and table.

Adding a 'Clearing' effect to inline elements

I'm not sure I've got exactly what you want to achieve, and why you have to display your divs as inline elements, but you could try with inline-block:

.form-item {
    display: inline-block;
    clear: both;
}

otherwise why don't you just float:left them and clear them?

.form-item {
    float: left;
    clear: both;
}

haven't tested it so it might not work. if you could elaborate more about why you are displaying your divs as inline elements, that would help! thanks

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.

Clear left inline element without floating

the answer is no, clear: left; will not work on inline element. You might want to declare element with display: inline-block - it might solve whatever issue you have. If you want answer that is not a complete guess, please make a demo on jsfiddle.

Clear left inline element without floating

the answer is no, clear: left; will not work on inline element. You might want to declare element with display: inline-block - it might solve whatever issue you have. If you want answer that is not a complete guess, please make a demo on jsfiddle.

Why do `inline-block` elements auto-clear their children?

Inline-block elements establish new block formatting contexts for their contents. A block formatting context root always tries to contain its floats if sized automatically; see section 10.6.7 of the spec:

In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges.

This is what makes an inline block able to contain its floats; no clearance is actually involved since no clearing element is introduced after the floating children.

CSS clear: both not working, element keeps staying on the side of each other

clear: both; only is relevant for elements that are floated, which is not the case for your span (those spans are inline-blocks, but that's another thing, clear has no effect on inline-blocks)

---

Related Topics