Home/ Questions/Q 573307
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T13:42:36+00:00

Suppose I have this HTML structure: <div class=a> <div class=floated-left>…</div> <div class=floated-left>…</div> </div> I

  • 0

Suppose I have this HTML structure:

<div class="a">
 <div class="floated-left">...</div>
 <div class="floated-left">...</div>
</div>

I have noticed that if I don’t set overflow:hidden to .a, then the <div class="a"> does not occupy any vertical size. For example, if I set its background to red, it is not visible at all. Inspecting it with FireBug shows that it’s there but of almost no vertical size.

To fix this, I found that I have to set overflow:hidden to .a. Then the first <div> goes over all its content.

Here is a real example:

<html>
<head>
  <style>
    .a { background-color: red; }
    .b { background-color: red; overflow: hidden }
    .floated-left { float: left; width: 100px; height: 100px; background-color: blue; }
  </style>
</head>

<body>
  <p>div with class a, that doesn't overflow:hidden:</p>
  <div class="a">
    <div class="floated-left">Hi,</div>
    <div class="floated-left">Mom!</div>
  </div>

  <div style="clear:both"></div>

  <p>div with class b, that does overflow:hidden:</p>
  <div class="b">
    <div class="floated-left">Hi,</div>
    <div class="floated-left">Dad!</div>
  </div>
</body>
</html>

Notice how Hi, Mom! does not get red background (no overflow:hidden), while Hi, Dad! does get red background (has overflow:hidden).

Can anyone explain this behaviour?

Here is screenshot of the example:

http://imgur.com/O8qvP

Thanks, Boda Cydo.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    When you float elements they are taken out of the document flow. Among other things, this means that they have no impact on the dimensions of the parent element (although its width will determine where the floats are positioned on the horizontal axis). They do however impact positioning of siblings within the container depending on whether those sibling are inline or block level elements and whether they have width or not.

    In order to make the height of the floats impact the height of the container you must have an element after them that clears them. However, what you are seeing here is actually a part of the CSS standard that you can use to clear floats without additional, non-semantic markup. The only issue is this behavior can vary slightly in older browsers and their css implementations. This effect is present with both overflow auto and overflow hidden but does not present with overflow visible. In IE < 6 you must have a width set on the containing element for it to work.

    • 0