Div has no height when there is img inside it

Question

I have a div[div1] that is surrounding other elements. Inside the elements I have an image that is positioned absolute. Div1 and the elements have float left on them and are showing no height. Is there a way to have this so the main overall div1 has a height so other elements like footers can be floated below it.

HTML

<div class="div1">
  <div> <img src="image1.jpg" /> </div>
  <div> <img src="image2.jpg" /> </div>
  <div> <img src="image3.jpg" /> </div>
</div>

CSS

.div1{
   width:100%;
   height:auto;
   overflow:auto;
   float:left;
   }
.div1 div{
   width:100%;
   height:auto;
   overflow:auto;
   float:left;
   }
.div1 div img{
   width:100%;
   height:auto;
   position:absolute;
   display:block;
   float:left;
   }

http://stackoverflow.com/questions/7817269/css-container-div-not-getting-height might be related (or even a duplicate) — ThiefMaster, Sep 18 '13 at 15:28
Your container div has no height because your images are positioned absolutely. Also div by default has height auto, so you don't need to define that unless you are trying to override it from some other place — Huangism, Sep 18 '13 at 15:39
@Huangism I have those images positioned absolute so they stack, in my working files they are .pngs so it makes sense. The reason for the absolute is because the images are all in this one div and they are full width to make them responsive. I was wondering if there is a way to have a height on the overall div while the images inside have absolute — Mike Boory, Sep 18 '13 at 15:48
@mboory see my update for a slightly different approach to achieve what you want — Huangism, Sep 18 '13 at 15:51
@mboory I added a new fiddle so you can see how the whole thing is structured — Huangism, Sep 18 '13 at 15:58
div's stack naturally as they are block elements so you can just remove the float — Robert Went, Sep 01 '15 at 08:27

Huangism · Accepted Answer · 2013-09-18T15:53:29.517

If you want div1 to have a height, then remove the position absolute from the images

.div1 div img{
   width: 100%;
   display: block;
   float: left;
}

Since all your elements are floating, the div1 will have a height. Your images were positioned absolutely so it is taken out of the content flow. This is the same as your divs not having any content inside of it, so you don't get a height.

http://jsfiddle.net/QDYYw/3/

Update :

Make the first image not positioned absolutely and the rest can be positioned absolutely, so they still have the stacking effect you want and the container will have a height since 1 of your images is in the content flow.

<div class="div1">
  <img src="image1.jpg" />
  <img src="image2.jpg" />
  <img src="image3.jpg" />
</div>

CSS

.div1 img:first-child {
   position: static;
}

see http://jsfiddle.net/QDYYw/4/ for full code

score 0 · Answer 2 · answered Sep 18 '13 at 15:29

0

That is because of the floats. A div is a block element, which always is 100%, so width: 100% is not needed. Also remove the display:block (div is block by default) and of you dont have a specific reason for the absolute, remove that too. And offcourse remove the floats.

If you want to keep everything, just give your divs position:relative;, absolute is always relative to the first relative element it finds

answered Sep 18 '13 at 15:29

Martijn

15,791
4
36
68

1

floats doesn't have anything to do with this, all the divs and images are floating, therefore the container will have a height, the issue is the absolute positioned images – Huangism Sep 18 '13 at 15:36
Just got an update, barbaric solutions are being proposed here. – Martijn Oct 28 '14 at 16:11

Div has no height when there is img inside it

2 Answers2

Linked