CODEWITHSUNDEEP
htmlcssdomcss-float
Mohammed Ibrahim
Mohammed Ibrahim

Reputation: 570

CSS float property unexpected behavior

So i was examining the css float property when i noticed a strange behavior that i couldn't know its reason.

This is a link to the code and preview of four divs, first two are floated right and left, third and forth just a normal divs.

I do understand that the third div will get overlapped by the second one, however what i don't understand is why the content of the third div got shifted down, shouldn't it hide behind the second div?

P.S i know the problem can be fixed using the clear property for the third div, however i am more concerned about the reason behind this behavior.

Code:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
aside, article, section, header, footer, nav {
    display: block;
}
html, body {
    margin: 0;
    padding: 0;
}
html {
    background: #ccc;
}
body {
    width: 600px;
    background: #fff;
    margin: 2em auto 2em;
    font: 100% Arial, Helvetica, sans-serif;
}
div {
    margin-bottom: 1em;
    margin-right: 2em;
    width: 85px;
    height: 50px;
    border: 1px solid #000;
    padding: 25px;
}
/*add styles here*/
.element1 {
    background: rgb(26, 78, 175);
    float:right;
    color:white;
}
.element2 {
    background: rgb(85, 66, 54);
    float:left;
    color:white;
}
.element3 {
    background: rgb(247,120,37);
}
.element4 {
    background: rgb(211, 206, 61);
}

?
</style>
</head>
<body>
    <div class="element1">Element 1 floated right</div>
    <div class="element2">Element 2 floated left</div>
    <div class="element3">Element 3 normal flow</div>
    <div class="element4">Element 4 normal flow</div>
</body>
</html>

Upvotes: 0

Views: 302

Answers (3)

Mohammed Ibrahim
Mohammed Ibrahim

Reputation: 570

I've found the answer to my question within this document.

Quoting from the document:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist. However, line boxes created next to the float are shortened to make room for the floated box. Any content in the current line before a floated box is reflowed in the first available line on the other side of the float.

So basically what the document says is, floated elements can overlap the Box model of elements added to the document normal flow, however it can't overlap their content; in other words, content of an overlapped element is restricted to the non-overlapped space.

P.S. So far i have abstracted the floating behavior as such:

Element1: floated element

Element2: non-positioned element

1-Draw Element2's box model.

2-Draw the Element1's box model and its content.

3-If Element2 still has non-overlapped space start filling it with its content.

4-If the space couldn't hold the whole content, start appending them under Element2 box model.

Hope this would help.

Btw, thanks and +1 to everyone who contributed to the question.

Upvotes: 0

Shailender Arora
Shailender Arora

Reputation: 7788

Actually when we use the float elements we should always clear them otherwise the other elements will overlap into floated elements because they are not cleared after floated elements as like happened in your example so i cleared your .element3 class.

.element3 {
    background: rgb(247,120,37);
    clear:both;
}

see the demo:- http://jsfiddle.net/ZpQuu/6/

Upvotes: 1

adrianes
adrianes

Reputation: 21

You need clear the float, if not the element is pushing down all the other elements

   <style>
    .clear {
        clear:both;
    }  
    </style>

    <div class="element1">Element 1 floated right</div>
    <div class="element2">Element 2 floated left</div>
    <p class='clear'></p> <!-- Usualy I use a div but you slyle all !-->
    <div class="element3">Element 3 normal flow</div>
    <div class="element4">Element 4 normal flow</div>

Upvotes: 2

Related Questions