Position relative, float takes div out of the normal flow

Question

How can i prevent taking div out of the normal flow but still using float, like this:

<div id="one">
    <div id="two"></div>
</div>

CSS:

#one {
    width: 100%;
    height: auto;
}

#two {
    width: 100px;
    height: 100px;
    position: relative;
    float: left;
}

Now div "one" has no height and div "two" just looks like it isn't in the first div.

Answer 1

Ahh, the collapse problem. There's an excellant article about floats here http://css-tricks.com/all-about-floats/ In your case, I'd add

overflow: auto

to #one

The relative info is quoted below:

Techniques for Clearing Floats

If you are in a situation where you always know what the succeeding element is going to be, you can apply the clear: both; value to that element and go about your business. This is ideal as it requires no fancy hacks and no additional elements making it perfectly semantic. Of course things don't typically work out that way and we need to have more float-clearing tools in our toolbox.

The Empty Div Method is, quite literally, an empty div. <div style="clear: both;"></div>. Sometimes you'll see a <br /> element or some other random element used, but div is the most common because it has no brower default styling, doesn't have any special function, and is unlikely to be generically styled with CSS. This method is scorned by semantic purists since its presence has no contexual meaning at all to the page and is there purely for presentation. Of course in the strictest sense they are right, but it gets the job done right and doesn't hurt anybody.

The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. However if you find yourself adding a new div just to apply this, it is equally as unsemantic as the empty div method and less adaptable. Also bear in mind that the overflow property isn't specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.

The Easy Clearing Method uses a clever CSS pseudo selector (:after) to clear floats. Rather than setting the overflow on the parent, you apply an additional class like "clearfix" to it. Then apply this CSS:

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

This will apply a small bit of content, hidden from view, after the parent element which clears the float. This isn't quite the whole story, as additional code needs to be used to accomodate for older browsers.

Answer 2

You're seeing your dive #one collapse. Adding an overflow value to the CSS for that element should fix this problem.

Answer 3

This should solve your problem. Try adding it to both DIVs:

**For the sake of testing, you might want to add some background color.

jsFiddle example here!

position: relative;
float: left;
clear: none;
display: block;