CODEWITHSUNDEEP
csspositioning
qadenza
qadenza

Reputation: 9293

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

Upvotes: 0

Views: 3478

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240878

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..

Upvotes: 1

Related Questions