CODEWITHSUNDEEP
csshtml
digitaura
digitaura

Reputation: 35

How to order div elements inside a container div?

Why do they render differently depending on the order in which they're marked-up? It looks like i want it to when I put "thirdDiv" first.

My html looks something like this:

<div id="container">
   <div id="firstDiv">1st</div>
   <div id="secondDiv">2nd</div>
   <div id="thirdDiv">3rd</div>
</div>

My css looks something like this:

body{ width: 100px; margin: 0px auto; color: white; }
#container{ width: 100px; height:60px; }
#firstDiv{ position: relative; width:60px; height: 40px; background: blue; }
#secondDiv{ position: relative; width: 60px; height:20px; background-color:red; }
#thirdDiv{ float:right; width:40px; height:60px; background-color: yellowgreen; }

(incorrect) http://jsfiddle.net/3B7xQ/

vs.

(correct) http://jsfiddle.net/EQSa5/

Upvotes: 1

Views: 2505

Answers (2)

John
John

Reputation: 7359

Basically the reason why this is happening is because when an element floats it removes it self out of the flow of the document (from it's current position than moving the specified direction) allowing other elements to move up into the space around the floated element. In your case the third element removed itself from it's current position moved to the right but there was nothing under it that would move around it.

Here is an example showing what the elements look like before floating and after floating.

First with the #thirdDiv element first in place.

Here it is with #thirdDiv float: none http://jsfiddle.net/EQSa5/2/

enter image description here

Here it is with #thirdDiv float: right http://jsfiddle.net/EQSa5

enter image description here

Notice how it moves from its current spot to the right and lets the things below it fall in place.

Now with the #thirdDiv element third in place.

Here it is with #thirdDiv float: none http://jsfiddle.net/3B7xQ/1/

enter image description here

Here it is with #thirdDiv float: right http://jsfiddle.net/3B7xQ

enter image description here

Same as last time notice how it moves from its current spot to the right and lets the things below it fall in place, but in this case there is nothing below it.

To illustrate the point further here is one more example with the 3rd div second

Here it is with #thirdDiv float: none http://jsfiddle.net/qELaZ/1/

enter image description here

Here it is with #thirdDiv float: right http://jsfiddle.net/qELaZ/

enter image description here

Hope that helped. I also left an article that could help you read up on it a little more. :)

Here is an article explaining that exact case as well. (It's a good article on understanding floats and the whole thing is worth the read.) http://alistapart.com/article/css-floats-101

Specifically there is this part of that article titled float first. http://alistapart.com/article/css-floats-101#section5

Upvotes: 1

user3246890
user3246890

Reputation: 139

Thats just because of the float element you have as part of the CSS for the green div. The "float-right" makes the div go to the right of the page, depending on its vertical position within that page.

Upvotes: 1

Related Questions