CODEWITHSUNDEEP
csscss-float
machineghost
machineghost

Reputation: 35780

Why Isn't My Clear Style Preventing Sibling Element From Floating?

I have an extremely simple snippet of HTML/CSS:

<div style="float: left; width: 180px; clear: both;">Foo</div>

<div style="float: left; width: 180px;">Bar</div>

Both divs float left, but the Foo div has clear: both. That should prevent the Bar div from floating next to it ... but it doesn't. If you throw that HTML into a browser you'll see the two divs are adjacent.

What am I failing to understand about clear?

Upvotes: 0

Views: 118

Answers (1)

Garrett Bear
Garrett Bear

Reputation: 39

You don't want to run clear after Foo, you want to run it before the start of Bar

<div style="float: left; width: 180px;">Foo</div>

<div style="clear: both; float: left; width: 180px;">Bar</div>

The clear CSS property specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. The clear property applies to both floating and non-floating elements

Upvotes: 1

Related Questions