Trying to get Parent container inrease in height with contents - html

Question

PART 1:
I am trying to make my parent div increase with height as the contents. it is a slide show contained in a parent div and the slide show is responsive. Everything sits fine but 10px padding is not reflected around the main container. Any help?
Example:
.mainer {
width: 100%;
background-color: red;
padding: 10px
}
.slide_wrapper {
width: 60%;
height: inherit;
top: 10px;
border: 0px solid black;
clear: left;
margin: 0 auto;
position: relative;
text-align: center;
}
<div class="mainer">
<div class="slide_wrapper">
<div class="carousel_slider">
<div class="item" style="width:100%;">
<img src="image.jpg" style="width:100%;height:auto" />
</div>
</div>
</div>
</div>
Part 2:
(Bonus for me.)
Assuming that I am also trying to include a different div class="rightbox" to the right of the container class="carousel_slider". Both of them have to stay inside the main container. How can I achieve this? Part 2 is just a curiosity for me.
Any help?.
Thanks and appreciation in Advance.
Michelle

Answer 1

Your problem might be related to using a clear without a clearfix. I'm not entirely sure why you have clear:left to begin with really, you don't have any other floated elements to clear in your html. Anyhow, when you clear an element, it no longer takes up space normally. The item within the cleared element will still take up space, but you can't apply margins and padding normally to a cleared element without clearfix. Here's one you can use easily.
http://nicolasgallagher.com/micro-clearfix-hack/
That being said, clear + clearfix is fairly depreciated and you may find better results elsewhere. Try making .mainer relatively positioned, and absolutely position .slide_wrapper inside of it. That should allow you to set the width to 60% still and align it relative to the top and left of .mainer. Perhaps look into flexbox if you aren't using old versions of internet explorer. I'm not going to explain all of flexbox here as other's have already done it and better, but it allows you to align items intelligently to their parent container and is particularly helpful if you element has siblings.

Answer 2

padding: 10px on the parent is being applied, but you have top: 10px on the img that is pushing it down 10px and messing up the bottom padding of the parent. To increase the space between the top of the image and the parent without messing up the bottom padding of the parent, use padding-top or margin-top instead of top on the img
And to put .rightbox beside of .carousel_slider, make the parent display: flex and it will put those 2 children in adjacent columns in a row.
.mainer {
width: 100%;
background-color: red;
padding: 10px;
}
.slide_wrapper {
height: inherit;
border: 0px solid black;
clear: left;
margin: 0 auto;
position: relative;
text-align: center;
padding-top: 10px;
}
.slide_wrapper {
display: flex;
align-items: flex-start;
justify-content: center;
}
.rightbox {
width: 100px;
height: 100px;
}
<div class="mainer">
<div class="slide_wrapper">
<div class="carousel_slider">
<div class="item" style="width:100%;">
<img src="http://kenwheeler.github.io/slick/img/fonz1.png" style="width:100%;height:auto"/>
</div>
</div>
<div class="rightbox">rightbox</div>
</div>
</div>