Div has no height even if it has content

Question

I have a <div> which has some <img> in it. Every <img> is inside it's own <div>. The problem is that the outer div is not automatically taking the height of the content even though I set it's height to auto. Also to display the inner divs inline I set them to float: left. But if i remove the float the outer div behaves normally and takes the height of the content. But I need the imgs to be inline. Can anyone help me?

JSFiddle

HTML:

<div id="gallery">
    <div class="gal-foto">
        <img src="http://farm3.staticflickr.com/2819/10183644713_c1f49eb81f_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm4.staticflickr.com/3694/10183642403_0c26d59769_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm4.staticflickr.com/3764/10183532675_0ce4a0e877_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm6.staticflickr.com/5331/10183598286_9ab37e273c_b.jpg" class="gal-img">
    </div>
    <div class="gal-foto">
        <img src="http://farm6.staticflickr.com/5334/10183535585_04b18fa7da_b.jpg" class="gal-img">
    </div>
</div>

CSS:

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
}
.gal-foto {
    float: left;
    margin: 3px;
    position: relative;
}
.gal-img {
    display: block;
    max-height: 150px;
    max-width: 150px;
}

See updated fiddle http://jsfiddle.net/gEyEr/6/ – Oct 14 '13 at 06:55 — , Oct 14 '13 at 06:55

score 74 · Accepted Answer · answered Oct 14 '13 at 06:53

74

See the Demo here . Just add overflow: auto; to your main container.

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
    overflow: auto;
}

answered Oct 14 '13 at 06:53

Vikas Ghodke

6,602
5
27
38

2

`overflow: auto` worked for me while `clear: both` did not. – SpaceJam Mar 04 '16 at 21:25
8

As a further refinement, if it's only the height that should adjust to fit the contents, you can set `overflow-y: auto` specifically, rather than just `overflow`. This way, if you have contents in a grid system, or some other scheme where you don't want horizontal overflow to occur, you can do something different with `overflow-x` – Michael Cruz Dec 13 '16 at 20:44
8

But why tho???? – fungusanthrax May 25 '18 at 18:36

score 15 · Answer 2 · answered Oct 14 '13 at 06:59

15

http://jsfiddle.net/WVL9a/

Add the following:

CSS:

.clearer { clear: both; }

HTML:

<div id="gallery">
    ....
    <div class="clearer"></div>
</div>

answered Oct 14 '13 at 06:59

Ben Barkay

5,473
2
20
29

11

I have never understood the clear-fix issues, could you please explain then I'll up vote :) thanks – elliotrock Dec 03 '15 at 05:01
Could someone let me know under what circumstances this works? – Lee Goddard Jun 20 '22 at 12:48
@LeeGoddard This explains it better than I will: https://css-tricks.com/clearfix-a-lesson-in-web-development-evolution/ – Ben Barkay Jul 11 '22 at 13:44
@BenBarkay - Great site, but I can't see where it says the simple use of `clear: both` ever works alone -- I got the feeling that the fact that doesn't work is the whole point of the page. The end of the article does say this works, though: ` display: flow-root; ` – Lee Goddard Jul 12 '22 at 00:20

score 5 · Answer 3 · answered Oct 14 '13 at 06:54

Add clearfix class to your main container:

.clearfix:before,
.clearfix:after {
   content: '\0020';
   display: block;
   overflow: hidden;
   visibility: hidden;
   width: 0;
   height: 0;
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Call it in your main container:

<div class="clearfix" id="gallery">
...
</div>

score 2 · Answer 4 · answered Oct 14 '13 at 06:54

Just add overflow: auto; like below:

 #gallery {
        border: 1px solid;
        border-radius: 10px 10px 10px 10px;
        box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
        height: auto;
        margin-top: 20px;
        padding: 15px;
        overflow: auto;
    }

score 1 · Answer 5 · answered Oct 14 '13 at 06:53

Like this just write #gallery in overflow:hidden;

demo

css

#gallery {
    border: 1px solid;
    border-radius: 10px 10px 10px 10px;
    box-shadow: 0 0 15px rgba(50, 50, 50, 0.7) inset;
    height: auto;
    margin-top: 20px;
    padding: 15px;
    overflow:hidden;
}

score 1 · Answer 6 · answered Oct 14 '13 at 06:54

1

Add this to your css file :

.clear{
clear:both;
}

Now, before closing each div, add this statement : <div class="clear"></div>

answered Oct 14 '13 at 06:54

Aneesh

1,703
3
24
34

I added a `
` at the end of the main div and it works perfectly. Thank you – Beniamin Szabo Oct 14 '13 at 07:05

score 1 · Answer 7 · answered Oct 14 '13 at 06:56

1

one method :set .gal-foto to display: inline-block

or you can clearfix #gallery,add these

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

answered Oct 14 '13 at 06:56

Yubin Duan

53
4

Div has no height even if it has content

7 Answers7

Linked