Search code examples
csspositioning

How to keep height of parent div with absolute positioned img inside?

<div id="show01">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
<img src="https://www.google.com/images/srpr/logo4w.png">
</div>

<div id="content"></div>

CSS

#show01{ 
    margin-top:14px; 
    position: relative;
    height:auto;
    border:thin solid blue;
}
#show01 img { 
  position: absolute;
    max-width:70%;
}
#content{
    background:#999;
    height:45px;
}

img must be position:absolute because they are subject of jquery slide show.

but, in that case div content goes to the top of page, because div #show01 has no height. It's just a blue line at the top.

So, how can I keep img position:absolute and show01 to have height as the img inside.

I cannot define div show01 height in pixels, because of keeping responsive layout.

fiddle is here

Solution

  • This is semi-hack(ish).. but you could set a margin for #show01.

    Try margin-bottom:24%;.. see the example and let me know if this is what you were aiming for.

    Example

    Basically you are going to have to set a margin equal to the size of the images to displace the unspecified height.. It seems to work responsively when you resize the browser too..