Make outer div be automatically the same height as its floating content

Question

I want the outer div, which is black to wrap its divs floating within it. I dont want to use style='height: 200px in the div with the outerdiv id as I want it to be automatically the height of its content (eg, the floating divs).

<div id='outerdiv' style='border: 1px solid black;background-color: black;'>
<div style='width=300px;border: red 1px dashed;float: left;'>
    <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>

<div style='width=300px;border: red 1px dashed;float: right;'>
    <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
</div>

How to achieve this?

alex · Accepted Answer · 2011-09-12T07:12:26.477

170

You can set the outerdiv's CSS to this

#outerdiv {
    overflow: hidden; /* make sure this doesn't cause unexpected behaviour */
}

You can also do this by adding an element at the end with clear: both. This can be added normally, with JS (not a good solution) or with :after CSS pseudo element (not widely supported in older IEs).

The problem is that containers won't naturally expand to include floated children. Be warned with using the first example, if you have any children elements outside the parent element, they will be hidden. You can also use 'auto' as the property value, but this will invoke scrollbars if any element appears outside.

You can also try floating the parent container, but depending on your design, this may be impossible/difficult.

edited Sep 12 '11 at 07:12

answered Apr 30 '09 at 00:44

alex

479,566
201
878
984

37

I wish i understood the logic of why overflow: hidden works in this case. – masteroleary Aug 30 '13 at 14:28
2

Yes, I was hoping it wasn't just me who thought this was counter-intuitive. alex? – regularmike Aug 30 '13 at 14:49
@regularmike I read an explanation once, I'll keep an eye out for it and link it back if I find it. – alex Aug 30 '13 at 23:28
3

@masteroleary @regularmike `HTML/CSS` has never been good UI technology, so counter-intuitive things in it are quite common :) – Yuriy Nakonechnyy Nov 08 '13 at 17:21
2

@masteroleary I realize this is an old thread, but I recently tried to answer a similar question at http://stackoverflow.com/questions/21041297#21041625 -- hope it helps – xec Jan 11 '14 at 23:34
1

+1 for the `float` solution. Works very well with the others fail, especially when paired with Twitter Bootstrap. – Fizzix Apr 30 '14 at 23:31
@regularmike CSS counter-intuitve? Never! – A.R. Dec 30 '15 at 17:23
What if you can not have overflow hidden? In my case content is just hidden onder the screen.. can't scroll down even when there is content. – nclsvh Jul 26 '16 at 14:17
@NicolasV There is an alternative solution in the paragraph below the example CSS. – alex Jul 26 '16 at 14:32
@alex Should have noted that I also tried that solution.. No luck – nclsvh Jul 26 '16 at 14:48

score 18 · Answer 2 · edited Aug 18 '13 at 01:16

18

Firstly, I highly recommend you do your CSS styling in an external CSS file, rather than doing it inline. It's much easier to maintain and can be more reusable using classes.

Working off Alex's answer (& Garret's clearfix) of "adding an element at the end with clear: both", you can do it like so:

    <div id='outerdiv' style='border: 1px solid black; background-color: black;'>
        <div style='width: 300px; border: red 1px dashed; float: left;'>
            <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
        </div>

        <div style='width: 300px; border: red 1px dashed; float: right;'>
            <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
        </div>
        <div style='clear:both;'></div>
    </div>

This works (but as you can see inline CSS isn't so pretty).

edited Aug 18 '13 at 01:16

kwah

1,149
1
13
27

answered Apr 30 '09 at 00:53

Lycana

1,154
4
10
17

Why did I get rated down? It works, and I rightly acknowledged that it wasn't a pretty solution. – Lycana Apr 30 '09 at 00:58
1

I'm not sure, I +1'd to get you back to 0 at least. Maybe you were voted down because you didn't correct his incorrect CSS... i.e. using equals sign to set a CSS property is incorrect. – alex Apr 30 '09 at 01:05
fair enough. I appreciate the +1 alex. I thought it was my statement was a fair one. – Lycana Apr 30 '09 at 01:09
This solution is better IMO. I would have accept this answer if it was my question. – ksg91 Sep 20 '12 at 11:25

score 8 · Answer 3 · edited Oct 22 '13 at 01:11

8

I know some people will hate me, but I've found display:table-cell to help in this cases.

It is really cleaner.

edited Oct 22 '13 at 01:11

Josh Crozier

233,099
56
391
304

answered Oct 11 '13 at 20:51

Nande

409
1
6
11

1

outer div use display: table; and inside div use display: table-cell; – Anukul Limpanasil Feb 29 '20 at 10:24
1

I used display: table-cell on only outer div and it worked. – MindRoasterMir Nov 27 '22 at 10:11

score 8 · Answer 4 · edited Jun 05 '13 at 22:59

8

You may want to try self-closing floats, as detailed on http://www.sitepoint.com/simple-clearing-of-floats/

So perhaps try either overflow: auto (usually works), or overflow: hidden, as alex said.

edited Jun 05 '13 at 22:59

Danny Staple

7,101
4
43
56

answered Apr 30 '09 at 00:48

DarkWulf

369
1
3

hidden works, but you're right, auto works that bit better. Thanks. – Matthew Setter May 01 '12 at 10:47

score 4 · Answer 5 · answered Apr 30 '09 at 00:51

First of all you don't use width=300px that's an attribute setting for the tag not CSS, use width: 300px; instead.

I would suggest applying the clearfix technique on the #outerdiv. Clearfix is a general solution to clear 2 floating divs so the parent div will expand to accommodate the 2 floating divs.

<div id='outerdiv' class='clearfix' style='width:600px; background-color: black;'>
    <div style='width:300px; float: left;'>
        <p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
    </div>

    <div style='width:300px; float: left;'>
        <p>zzzzzzzzzzzzzzzzzzzzzzzzzzzzz</p>
    </div>
</div>

Here is an example of your situation and what Clearfix does to resolve it.

score 3 · Answer 6 · edited Jun 06 '13 at 01:20

3

Use jQuery:

Set Parent Height = Child offsetHeight.

$(document).ready(function() {
    $(parent).css("height", $(child).attr("offsetHeight"));
}

edited Jun 06 '13 at 01:20

Cody Guldner

2,888
1
25
36

answered Dec 20 '10 at 12:09

Harpal

1,729
17
18

3

Overkill, when you can do it with CSS alone. – alex Jan 06 '11 at 13:04
1

With my answer you can set parent height same as child hight but using overflow we are not changing parent height that will create some problem if we are showing data after parent div. – Harpal May 13 '11 at 07:31

score 2 · Answer 7 · edited Dec 29 '22 at 20:00

2

Add a new, empty div just before the closing tag of the parent with this style: clear: both;. Like this: <div style="clear:both"></div>.

I spent over a week trying to figure this out!

edited Dec 29 '22 at 20:00

user3413723

11,147
6
55
64

answered Feb 07 '13 at 20:30

RonanCodes

1,016
9
14

1

where to use clear: both ? I used in on the container div and nothing changed. – MindRoasterMir Nov 27 '22 at 10:18
1

[left-aligned divs all here]
. for example see next answers. – MindRoasterMir Nov 27 '22 at 10:21

Make outer div be automatically the same height as its floating content

7 Answers7

Linked

Related