Floated div does not expand to full width of parent div. Why?

Question

According to this excerpt from BrainJar.com's positioning article

For one, the box being floated should have a width defined for it, either explicitly or implicitly. Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it.

However in the following code, this does not happen i.e. the floated div does not expand to it's parent containers full width and there are no width defined on floated div.

HTML

    <div id="container">
         <div id="aqua">aqua</div> 
         <div id="yellow">yellow</div> 
         <div id="pink">pink</div>
    </div>

CSS

#container { border:1px solid red} 
#aqua, #yellow { border:1px solid green; float:left;}   
#pink { width:150px; border:1px solid blue; }

I am interested in knowing the reason behind it.

Thanks

Try to reproduce your problem on https://jsfiddle.net/ so it's easier for us to inspect the problem. — TomTasche, Jan 02 '16 at 10:31
add `clear:both` and check. it will clear both side of div. https://jsfiddle.net/d6qnjpg2/3/ Check detailed answer here. http://stackoverflow.com/questions/12871710/what-does-the-css-rule-clear-both-do — ketan, Jan 02 '16 at 10:47
I do not agree with this article. Follow this article http://css.maxdesign.com.au/floatutorial/introduction.htm — Sumit, Jan 02 '16 at 10:57
I am not looking to clear floats on either sides of div. Your fiddle does not answer my question. I need an explanation as to why the floated div does not expand to full width of it's parent box as per the blog post at Brainjar.com — dkjain, Jan 02 '16 at 11:12

Asons · Accepted Answer · 2016-01-02T12:15:56.740

Why it works in Brainjar.com is because the floats are filled with content, and as such they expand to its parent width if width is omitted on the floated element.

So the statement

Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it.

will be wrong if the floated element is empty or with content less than to fill its container's width.

More about floats here: https://developer.mozilla.org/en-US/docs/Web/CSS/float

And filling your sample with more content show that it works like that.

#container { border:1px solid red} 
#blue, #aqua, #yellow { border:1px solid green; float:left;}   
#pink { width:150px; border:1px solid blue; }

#pink { clear: left }

<div id="container">
  <div id="aqua">aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua</div> 
  <div id="yellow">yellow</div>
  <div id="blue">blue</div>
  <div id="pink">pink</div>
</div>

Ok. As we know that floated elements are taken out of flow of document and any block level elements created before and after will ignore floated elements then why text content in those elements start after floated elements right edge? Should they not begin at parent box edges? — dkjain, Jan 02 '16 at 12:04
@dkjain No, floated elements stacks after each other until their will be one which clear its float (or not enough space for the last element to fit). They don't behave as block level in that way, as _Brainjar.com_ write in the article. I updated my answer's sample to show how that works. — Asons, Jan 02 '16 at 12:19
@dkjain I also posted a comment on _Brainjar.com's_ website, suggesting they correct those statements to not mislead their readers. Hopefully you will find an update there soon, saying it differently. — Asons, Jan 02 '16 at 12:44

score 0 · Answer 2 · answered Jan 02 '16 at 11:11

0

are you looking too fill the full width? Or do you want an explanation?

If you just want the full width just add width: 100%; to your floated IDs

answered Jan 02 '16 at 11:11

Serge Inácio

1,366
9
22

I know this can be done via `width:100%` on floated div's however I am looking for an explanation as to why this behavior. – dkjain Jan 02 '16 at 11:13

Floated div does not expand to full width of parent div. Why?

2 Answers2