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

Question

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.

score 64 · Accepted Answer · edited May 23 '17 at 12:02

64

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

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;
}
```
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>
```

Add a set height to the parent element. Example.

<div style="height: 200px">
    <div style="float: left"></div>
    <div style="float: left"></div>
</div>

Make the parent element a float. Example.

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

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>

edited May 23 '17 at 12:02

Community

1
1

answered Jun 10 '12 at 13:21

jacktheripper

13,953
12
57
93

2

And do NOT do #1 for adding additional blank, non-semantic elements that just clutter things up. – Rob Jun 10 '12 at 13:28
I actually tried no.1 and it didn't work (I'm working in WP so I probably put it in slightly the wrong place in the template), but no.2 works a treat, thanks! – Jun 10 '12 at 13:30
Thank you for the very thorough explanation. Every time I have run into this issue I have always used #1 even though it is so ugly but I had not seen a different solution. I ran into a case where adding an extra div was not an option, did a little extra digging and found your answer. Now I am armed and dangerous! lol. Thanks again. – MatthewLee Aug 29 '13 at 21:45
+1 for providing multiple solutions; each with working fiddles along with a clear explanations. – ᴍᴀᴛᴛ ʙᴀᴋᴇʀ Dec 18 '13 at 14:19
+1 for -> style="overflow: auto" (I am very new to web-development^^) Thanks! :) – Martin Pfeffer Jun 01 '15 at 08:12
the best clearfix to wrap children is this method, follow this and wrap floated children – AmerllicA Jul 26 '17 at 10:12

BebliucGeorge · Answer 2 · 2012-06-10T13:26:57.760

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:

Add overflow: hidden to the parent container.

#wrap { overflow: hidden; }

Use a pseudo-element to add clear: both .

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

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.

score 3 · Answer 3 · edited Dec 27 '15 at 20:04

3

Try adding overflow: hidden to your #wrap div.

edited Dec 27 '15 at 20:04

BartoszKP

34,786
15
102
130

answered Jun 10 '12 at 13:21

Jim

737
3
12
27

score 2 · Answer 4 · answered Jun 10 '12 at 13:32

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.

score 0 · Answer 5 · answered Jun 10 '12 at 13:26

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>

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

5 Answers5

Linked

Related