Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to fit a div's height to wrap around its floated children

This is a common issue when working with floats. There are several common solutions, which I have ordered by personal preference (best approach first):

  1. Use the ::after CSS pseudo element. This is know as the 'clearfix', and works IE8 and up. If you need compatibility with earlier versions of IE, this answer should help. Example.

    .parentelement::after {
        content: "";
        display: table;
        clear: both;
    }
    
  2. Add the two floats into a container with the CSS attribute overflow: auto or overflow: hidden. However, this approach can cause issues (e.g. when a tooltip overlaps the edges of the parent element a scrollbar will appear). Example.

    <div style="overflow: auto">
        <div style="float: left"></div>
        <div style="float: left"></div>
    </div>
    
  3. Add a set height to the parent element. Example.

    <div style="height: 200px">
        <div style="float: left"></div>
        <div style="float: left"></div>
    </div>
    
  4. Make the parent element a float. Example.

    <div style="float: left">
        <div style="float: left"></div>
        <div style="float: left"></div>
    </div>
    
  5. Add a div after the floats with clear: both. Example.

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

Add overflow: hidden; to #wrap. This is a clear fix. Here's some documentation about it: http://positioniseverything.net/easyclearing.html

LE: There are also multiple ways you can achieve this, depending of the browser compatibilty:

  1. Add overflow: hidden to the parent container.

#wrap { overflow: hidden; }

  1. Use a pseudo-element to add clear: both .

#wrap:after { clear: both; content: ""; display: table;}

  1. The most commonly used tehnique is to add an extra as the last element of the parent container.

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

I preffer not to use the 3rd one as you get extra HTML markup.


Try adding overflow: hidden to your #wrap div.


I've come to start using this "micro-clearfix" solution from Nicolas Gallagher.

http://nicolasgallagher.com/micro-clearfix-hack/

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    *zoom:1;
}

Just add that to your CSS and any floated element, add the "cf" class to the wrapper of any any element that has floated children.