Floated queries

Question

Consider the following code:

<div style="width:250px;background:red;">
  line1
  <div  style="width:auto;background:green;margin-left:10%;margin-right:10%;" >
     line2
  </div>
 </div>

and its results:

The above is absolutely understandable to me.

Now, this code:

<div style="width:250px;background:red;">
line1
<div  style="float:left;width:auto;background:green;margin-left:10%;margin-right:10%;">
     line2
</div>
 </div>

and its results:

I cannot explain two things. First one: why does the inner div change position? Since floating does not affect previous elements, I'd expect text "line1" would not wrap next to green div! Second one: Float property does not accept width:auto? Why green div shrinks?

Thank you

Answer 1

A document flow refers to block elements rendering in a vertical direction, inline elements rendering in a horizontal direction, and all elements rendering in the order they are encountered.

---

Excerpt from w3.org - Floats and clearing

<p>This is a very simple document.</p>
<p>It consists of <em>two</em> paragraphs.</p>

Here is a screen shot of that document with an overlay that shows the two block boxes generated by the p elements and the inline box generated by the em element.

---

Float alters the way that the element is rendered in the document flow. Unlike position absolute, it will not entirely remove the element from the flow. It essentially makes it similar to an inline block element with the caveat that it will "float" over other non floated elements in the direction indicated as far as possible.

As a result, the line2 element does not cause a new line, and takes precedence in rendering over line1. Because of this you end up with a line2 element coming before line1.

As for the width, since line2 is now inline-ish its width is just to contain the content. When auto is used, it has no affect on this.

However, there is a caveat. If width:200px; were used on line2 then that would make the float be placed on the next line because that was "as far left as possible" since there was not enough space to float a 200px element (+20% for margin) in the previous line. Because line1 was already there, and with 200px and 20% margin of the containing block (50px), line2 would not be able to fit on the same line.

fiddle for image