Css Floating Elements

Question

I was told by a friend a while back that right floated elements should come first in my document, but I think I misunderstood what he was trying to tell me, I wondered if someone could explain why if I have both the right floated divs first that the first left floated div is cleared and comes on the line after the first right floated div?

Here is a snippet that doesnt perform as I would want (2 left and 2 right floated stacks adjacent to each other)

JSfiddle

And here it works as I would want but I have had to move the order of the elements around in the document:

JSFiddle

Sorry if this has already been answered and Im sure it is a simple question to answer, I would like to know why I need to go right floated, left floated but then for the next floats it doesnt seem to matter if right or left floated comes first.

Thanks

Marc Audet · Accepted Answer

Quick Tutorial About Floats

I set up a few examples and provided a fiddle at http://jsfiddle.net/audetwebdesign/xJSGZ/

I will comment on each in succession to illustrate how the elements are laid out.

In Ex 1, no floats, the squares stack one above the other since each is a block element.

Example 1 - no floats

      1
      2
      3
      4

In Ex 2, I float div #2 to the right. In this case, div #2 is taken out of the document flow and forced to the right and div #3 flows in right after div #1.

Example 2 - float right element #2

      1
      2
      3
      4

In Ex 3, I float div #4 to the right. Since div #4 comes after div #3 in the document flow, div #4 sits on its own line.

Example 3 - float right element #2 and #4

      1
      2
      3
      4

In Ex 4, I float div #1 and #2 to the right. both of these are taken out of the flow and positioned flush right. The two following elements, div #3 and #4 flow in. I used clear: right in div #2 to force it to start a new line.

Example 4 - float right element #1 and #2

      1
      2
      3
      4

However, to get #1 and #2 on the left and #3 and #4 on the right, create an inner-wrapper and float the inner-wrapper div's to the left and right respectively:

Example 5 -  float nested div's

    
       1
       2
    
    
      3
      4

These examples give you an idea of the flexibility and the limitations of using floats to position elements. The order of elements do make a difference since floating an element changes its order in how the browsers build the page layout.

Hope this helps.

Css Floating Elements

Answers (2)

Related Questions