CSS - How to make parent div responsive? - html

Question

I have a child div inside a parent div in order to make the child div responsive. I would like to make the parent div responsive as well, but after days of searching I haven't found any solutions.
My Code:
CSS
.parent {
width: 100%;
height: auto;
margin: 0 auto 0 auto;
background-color: #b5b5b5;
overflow: hidden;
position: relative;
}
.css-slideshow {
position: relative;
max-width: 1050px;
height: 345px;
margin: 3.5em auto auto auto;
z-index: 1;
}
.css-slideshow div {
margin: 0;
position: absolute;
max-width:100% !important;
height:auto;
}
.css-slideshow img {
box-shadow: 0 0 2px #666;
max-width:100% !important;
height:auto;
}
HTML
<div class="parent">
<div class="css-slideshow">
<div>
<img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" />
</div>
</div>
</div>
Here's a jsfiddle.
The grey portion is the parent div that I would like to be responsive so that it's bottom aligns with the bottom of child div (css-slideshow) as resolution decreases. I'm not sure if it makes a difference, but I would like the parent div's height to be responsive, not it's width, which is set to 100% in order to make it stretch across the entire page.
NOTE: The space above the image (child div: css-slideshow) is intentional; it makes room for a navigation bar. The z-index in css-slideshow is to keep it behind a responsive dropdown menu.Thanks for reading!

Answer 1

If you get rid of the position: absolute on the child and the height on the parent it appears to work. Is there a reason you made it position absolute?
http://jsfiddle.net/nupebzh4/4/
When you made the child position: absolute, it took it out of the dom flow. This made it so the parent did not know how tall the content was, which is why you had to hardcode a height. If you put the child back in the flow the parent container can auto size itself to contain the content as it changes size since you don't need to hardcode a height.
.parent {
width: 100%;
height: auto;
margin: 0 auto 0 auto;
background-color: #b5b5b5;
overflow: hidden;
position: relative;
}
.css-slideshow {
position: relative;
max-width: 1050px;
margin: 3.5em auto auto auto;
z-index: 1;
}
.css-slideshow div {
margin: 0;
max-width:100% !important;
/* responsive */
height:auto;
}
.css-slideshow img {
box-shadow: 0 0 2px #666;
max-width:100% !important;
/* responsive */
height:auto;
}

Answer 2

I changed a bit your css :
remove overflow:hidden
commented the height for .css-slideshow
remove the height:auto
http://jsfiddle.net/nupebzh4/5/
.parent {
width: 100%;
margin: 0 auto 0 auto;
background-color: #b5b5b5;
position: relative;
display:inline-block;
}
.css-slideshow {
position: relative;
max-width: 1050px;
/*height: 345px;*/
margin: 3.5em auto auto auto;
z-index: 1;
}
.css-slideshow div {
margin: 0;
position: absolute;
width:100%;
}
.css-slideshow img {
box-shadow: 0 0 2px #666;
width:100%;
}