Float boxes spill from container

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
Post Reply
User avatar
maXmo
Posts: 19
Joined: November 15th, 2007, 4:17 am

Float boxes spill from container

Post by maXmo »

Code: Select all

<html>
<head>
<style type="text/css">
div { border: 1px solid black; }
#b { float: left; border-color: red; }
</style>
</head>
<body>
<div id="a">
<div id="b">b</div>
</div>
</body>
</html>


Here div#a has height zero and div#b is displayed below div#a. What's going on and how to make it fit?
Dom1953
Posts: 52
Joined: July 24th, 2014, 6:02 am
Location: Australia

Re: Float boxes spill from container

Post by Dom1953 »

As discussed in the MDN float article, floated elements are taken out of normal flow. Elements floated left are positioned at the top left of their parent container. (The article goes into much more detail).

Because div #a in your example has no flowed content after div #b is floated, its height is zero. If you insert content (the letter 'a' for example) within div #a, it now has content, which will flow down the right side of div #b's layout box.

Use the CSS clear property to start flow past a float. How to use it is discussed in the same MDN article as above.
User avatar
jscher2000
Posts: 11742
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA
Contact:

Re: Float boxes spill from container

Post by jscher2000 »

Although this article is 12 years old now, it is just as relevant as ever: http://www.complexspiral.com/publicatio ... ng-floats/
User avatar
maXmo
Posts: 19
Joined: November 15th, 2007, 4:17 am

Re: Float boxes spill from container

Post by maXmo »

Thanks, looks like overflow: auto; makes the container stretch properly.
Post Reply