Interaction between floated and "non floated" elements

Question

Consider the following code:

HTML:

<div class="wrapper">
  <div id="inner1">
     LINE1  
  </div>
  <div id="inner2">
    LINE2 
  </div>
</div>

CSS:

.wrapper{
    width:400px;
    overflow: auto;
    background-color: #0FC;
}
#inner1{
    float: left;
    width: 40%;
    margin-right: 5%;
    margin-left: 5%;
    background-color: #69C;
}
#inner2{
    float:none;
    width: auto;
    margin-left: 5%;
    margin-right: 5%;
    background-color: #C09;
}

Output:

If we change width:auto to e.g. width:20% (on #inner2) we get the following output:

Why does #inner2 collapse under #inner1? There is enough space next to #inner1!

What makes this difference between width:auto and width:xx%?

---

Also, I'd like an explanation for the lack of right margin of #inner1 and left margin of #inner2 in the first example. This is margin-collapse effect, isn't it? Why does it happen here?

Answer 1

The float:none is affecting your dimensions.

Difference between auto and %

Using clear:both instead of float:none

change inner 2 from:

float:none;

to

  float:left;