CODEWITHSUNDEEP
htmlcsscss-float
user1447371
user1447371

Reputation:

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

I have a div wrapped around two children, one floated left and the other right. I want to put a border and background around the children, but the div has 0 height since it doesn't resize to fit the children.

Here is an example of it in action: http://jsfiddle.net/VVZ7j/17/

I want the red background to go all the way down. I've tried height:auto, but that didn't work.

Any and all help would be appreciated, thanks.

P.S. I don't want to use any javascript if that's possible.

Upvotes: 31

Views: 33414

Answers (5)

Jim
Jim

Reputation: 743

Try adding overflow: hidden to your #wrap div.

Upvotes: 3

jacktheripper
jacktheripper

Reputation: 14219

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>

Upvotes: 68

jmbertucci
jmbertucci

Reputation: 8224

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.

Upvotes: 2

BebliucGeorge
BebliucGeorge

Reputation: 751

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.

Upvotes: 5

vikrantx
vikrantx

Reputation: 603

Just add one more div with style clear:both before closing a outer div i.e. here "wrap"

--Sample code--

<div id="wrap">
    <div id="left">
        <p>some content at left</p>
    </div>
    <div id="right">
        <p>some content at right</p>
    </div>
    <div style="clear:both"></div>
</div>

Upvotes: 0

Related Questions