Question

I have a problem with a float which overflows (JSFiddle here).

HTML

<div id="father">
    <div id="son">
        gruik
    </div>
    <div id="dog">
        gruikgruik gruik gruik gruikg ruik gruik gruikgr uikgruik gruik gruik gruik
    </div>
</div>​

CSS

div { border: solid; }
#father { width: 300px; position: relative; }
#father:after { content: ""; display: block; clear: both; }
#son { width: 100px; float: left; border: solid red; }
#dog { float: left; border: solid blue; position: absolute; left: 105px; }

As you can see, #dog overflows from #father. I tried classical CSS techniques but they just do not work (neither the clearfix method, nor overflow:hidden; or overflow:auto;).

I think the problem appears because of the use of the position CSS properties but I need it.

Answer 1

position: absolute; is correctly positioning the #dog element relative to #father (because #father has position: relative;).

However it is only the #son element which is giving #father its height. Elements positioned absolutely are taken out of the flow and therefore if #dog increases in height, its parent container (#father) will not, and therefore #dog looks to be overflowing.

Why do you have to use position: absolute; on #dog?

Can you not just use float, and set its width? You are setting its parent and siblings widths anyway so you know what width it should be (if you specify the width of the borders too).

DEMO: http://jsfiddle.net/sgw4K/5/

EDIT/UPDATE: After discovering additional styling, thirtydot has recommended two sound fixes to the problem. See comment below or the following:

To fix that, you can remove float: left from #son and then pick one of
these two choices: margin-left: 52px or overflow: hidden; on the #son element.