Search code examples
htmlcsscss-floatstylesheet

Layout of HTML div tags with float property

I have one question:

  • Why the output of the following HTML code is like this?

enter image description here

Here is the code:

<div style="width: 500px; float: left; border-style: solid; padding-left: 10px;">This box occupies 516 pixels on the browser window</div>
<div style="width: 400px; float: left; border-style: solid; padding-left: 10px; margin-left: 50px;">This box occupies 466 pixels of the browser window</div>
<div style="width: 966px; border-style: solid; padding-left: 10px;">This box occupies 982 pixels of the browser window</div>

I am expecting that the third div should appear under the other two floating divs but it looks like it is containing them?

Did I use the float property in a wrong way?

P.S. I am using Mozilla Firefox as a browser.

Thank you

Solution

  • Block elements are laid out “behind” floated elements, only their inline content floats around the floated elements.

    If you want it “under” them, then clear the float.