Second div after floating

Question

Consider the following HTML code:

<div id="footer1">   
           Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
  </div>

   <div id="footer2">         
         Lorem ipsum dolor sit amet, consectetur adipisicing elit
   </div>  

   <div id="footer3">     
     Lorem ipsum dolor sit amet, consectetur       
   </div>

and its responding CSS:

body{
    padding: 30px;
    font-size: 0.9em;
    line-height: 1.6em;
    font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
    background-color:#222;
}

#footer1{
    float: left;
    width: auto;
    margin-top: 0;
    margin-bottom: 50px;
    margin-right: 10%;
    margin-left: 10%;
    color: #FFF;
    text-align: justify;
    border: thin dashed #DDDDDD;
}
#footer2{
    float: none;
    width: auto;
    margin-top: 0;
    margin-bottom: 50px; 
    margin-left: 2%;
    margin-right: 2%;
    color: #FFF;
}
#footer3{
    float: none;
    width: auto;
    margin-bottom: 10px;        
    margin-left:12%;
    margin-right:12%;
    color: #FFF;
}

You may see the corresponding fiddle at http://jsfiddle.net/KnUfY/; however it is not illustrative enough as far as my question is concerned.

So, which is my question?
I've used Mozilla Firebug as to highlight the browser area which is occupied by each div. I found that #footer2 area(content with its margins) begins at the same place as if #footer1 did not exist. So far so good since #footer1 is considered to be out of flow.

My problem is: I thought #footer3 would behave like #footer2, namely its area to begin not after #footer2 but to "include" #footer1 and #footer2 areas. In other words, #footer3 behaves like floating has been cleared; however how this clearance took place?

This was always one of my queries! When does floating 's influence end if we do not clear it with the classic methods(overflow:auto, clear, after,...)? Is it the case only the first div after float is influenced? The second automatically clears floating?

Thank you

Since #footer2 and #footer3 are statically positioned block level elements, #footer3 will appear below #footer2. In the same way that you would expect two headings or paragraphs to appear one below the other. If it is your intention for all three footers to occupy the same space, you should absolutely position them inside of a relatively positioned container. — Jonathan Nicol, May 21 '14 at 10:42
The floated element floats over the immediate next block level element (In your case `#footer1` floats over `#footer2`) without conflicting with the elements after that (that is `#footer3`). There is no need to use `float: none; width: auto;` for #footer2 and #footer3 as it's a DIV (a block level element). — Dipak, May 21 '14 at 10:53
In this example you need not to be floated see here updated fiddle:http://jsfiddle.net/KnUfY/11/ — , May 21 '14 at 10:57

score -1 · Answer 1 · edited May 23 '17 at 12:11

u are using float: none that is unreadable for css u must use clear:both (left/right/both) to remove the floating. the best way to do this is by using this clearfix:

.clear {
  zoom: 1;
}
.clear:after {
  display: block;
  content: "";
  height: 0;
  clear: both;
}

place this .clear class on the parrent of ur floated element/s!

if u are interested there is a better way to layout ur elements in a row. I think the best way is by using display:inline-block see here. However for inline-block elements there is a small "bug" with whitespaces between the here is info how to fix it :)

Second div after floating

1 Answers1