1

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)

<div style="margin-left: auto; margin-right: auto; height: 600px; border: 1px solid black">
      <div style="width: 200px; height: 200px; background-color: red; float:right;"></div>
      <div style="width: 200px; height: 200px; background-color: green; float:right; clear: right"></div>

      <div style="width: 200px; height: 200px; background-color: yellow; float:left; clear: none"></div>
      <div style="width: 200px; height: 200px; background-color: purple; float:left; clear: left"></div>                   
  </div>

JSfiddle

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

<div style="margin-left: auto; margin-right: auto; height: 600px; border: 1px solid black">
      <div style="width: 200px; height: 200px; background-color: red; float:right;"></div>
      <div style="width: 200px; height: 200px; background-color: yellow; float:left; clear: none"></div>

      <div style="width: 200px; height: 200px; background-color: green; float:right; clear: right"></div>          
      <div style="width: 200px; height: 200px; background-color: purple; float:left; clear: left"></div>                   
  </div>

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

Improve this question
5
  • 2
    Both fiddles show same result Commented Mar 27, 2013 at 10:38
  • @slacker dont know why different in mine; Commented Mar 27, 2013 at 10:41
  • Ok I must have missed something... I just tried pasting those examples into Firefox 19.0.02 and they dont look the same. edit I just tried in IE 8 and they do look the same though. Commented Mar 27, 2013 at 10:42
  • No I think the first fiddle is incorrect Commented Mar 27, 2013 at 10:44
  • Yep, there's the same code in both jsFiddle. Commented Mar 27, 2013 at 10:45

2 Answers 2

Reset to default
2

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.

<h3>Example 1 - no floats</h3>
<div class="wrapper">
      <div class="square" style="background-color: red;"><b>1</b></div>
      <div class="square" style="background-color: green;"><b>2</b></div>
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple;"><b>4</b></div>
</div>

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.

<h3>Example 2 - float right element #2</h3>
<div class="wrapper">
      <div class="square" style="background-color: red;"><b>1</b></div>
      <div class="square" style="background-color: green; float: right;"><b>2</b></div>
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple;"><b>4</b></div>
</div>

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.

<h3>Example 3 - float right element #2 and #4</h3>
<div class="wrapper">
      <div class="square" style="background-color: red;"><b>1</b></div>
      <div class="square" style="background-color: green; float: right;"><b>2</b></div>
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple; float: right;"><b>4</b></div>
</div>

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.

<h3>Example 4 - float right element #1 and #2</h3>
<div class="wrapper">
      <div class="square" style="background-color: red; float: right;"><b>1</b></div>
      <div class="square" style="background-color: green; float: right; clear: right;"><b>2</b></div>
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple;"><b>4</b></div>
</div>

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:

<h3>Example 5 -  float nested div's</h3>
<div class="wrapper">
    <div class="inner-wrapper" style="float:left;">
       <div class="square" style="background-color: red;"><b>1</b></div>
       <div class="square" style="background-color: green;"><b>2</b></div>
    </div>
    <div class="inner-wrapper" style="float: right;">
      <div class="square" style="background-color: yellow;"><b>3</b></div>
      <div class="square" style="background-color: purple;"><b>4</b></div>
    </div>
</div>

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

3 Comments

Excellent explanation, thanks for taking the time to do this.
Thank you! To really understand floats, you need to read the chapter in Eric Meyer's book. An up vote would be appreciated. All the best!
Unfortunately I am not able at the moment but hopefully somebody else will do this?
0

The fact is: The element that floated will take the rest space that remain from floated element right before it. so, you cant get paralel of two elament(one right and other left) if their are not be placed consecutively.

example:

you can't get div1 and div2 to be horizontal paralel if otherdiv floated too.

<div id="div1"></div>
<div id="otherdiv"></div>
<div id="div2"></div>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.