Why do elements need to be floated right before left when in the same container with a centred element?

Question

I had a problem with a right floated element not staying on the same horizontal alignment as a left floated element and a centred element. The right floated element was floating right, but sitting below the horizontal line the others were on.

When floating elements (for example one left, one centred and one right) in the same div, the right element needs to stack before the left element.

Example:

<div id=container>
    <div id="float-right"></div>
    <div id="margin-auto"></div>
    <div id="float-left"></div>
</div>

If I have only two elements, one left and one right they sit horizontally as below.

See example: jsfiddle

When I add a central element the right element moves down.

See example: jsfiddle

What is happening here ?

Answer 1

I will provide you with a simple example here, let's assume that you are not assigning the middle div any width so see what it will be actually doing

Demo

<div style="width:100%">
   <div style="width:20px;height:20px;background-color:red;float:left;border: 3px solid #000;"></div>
   <div style="height:20px;background-color:red;margin:0 auto auto;border: 3px solid #000;"></div>   
   <div style="width:20px;height:20px;background-color:red;float:right;border: 3px solid #000;"></div>
</div>

Why this happens?

div is a block-level element, it takes up the entire horizontal space on the page, if you know, when you float any element either left or right it won't take 100% anymore and it will take only the space assigned by using width, or the content it holds, so in this case, left floated div will take 20px width leaving other space unused. Now you have another div which IS NOT FLOATED but it will take the rest of the available horizontal space, making your right floated div element to push down.

So what to do in order to solve this?

You need to float all the div to the left, or it may be enough if you make the middle div float to the left or to the right. Now I am aware that you want to have 2 div, 1 floated to left and other to right, but this is not the right way to do that, if you want, you can wrap the elements inside a container div, or what you can use is position: absolute; to set the elements right.

---

In order to show you how block level elements work, I will share you another example here..

Assume that you are having a div nested inside a p tag (This is invalid so please never use this in real world, this is just for demonstration purpose), and give some width to the div element and see how it renders your text.

<p>Hello World, I don't want the <div>text to</div> break</p>

div {
    width: 40px;
    background: #f00;
}

Demo 2

Though you provide the width to block level element, it will still break the paragraph.

---

From w3c

By default, block-level elements are formatted differently than inline elements. Generally, block-level elements begin on new lines, inline elements do not.

Answer 2

This happens because of the way elements are floated according to the HTML spec. Elements are floated horizontally from left to right. Any floated element will appear as far left as it possibly can.

Since div is a block level element, it will push everything down on the right hand side, but stack against anything on the left.

In your example, you can not see it, but the floated, or centre, div extends all the way out to the edge of the page as demonstrated by @Mr. Alien's fiddle.

You can read more about this in the spec:

http://www.w3.org/wiki/Floats_and_clearing

Answer 3

div is a block level element, it is making your right div push down as it is not floated, either on left or on the right side, and hence it pushes your other div below.

If you float that too, it will make the rest of the space on other side empty, thus it will allow the right floated div to sit beside the middle div

http://jsfiddle.net/mSXX6/2/