There are multiple div blocks within a parent block: one for the menu on the left, and one for the text on the right. How can you make the right inner block stretch to the full height of the parent block like the left one? The parent block has a minimum height of 1100px.
Take a look at the code:
<div id="wrapctr">
<div id="leftmenu"></div>
<div class="rightcontent">
//common div
<div style="padding: 10px; width: 100%; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; background:white">
// img div
<div style="float: left; padding: 10px; text-align: center; width: 257px;"><img src="../img/1625.jpg" width="200"></div>
</div>
</div>
</div>
CSS
#wrapctr {
width:80%;
min-width: 700px;
max-width: 1200px;
background:#FFF;
margin:0 auto;
min-height:1100px;
z-index:2;
}
#leftmenu {
background: #FFF;
float: left;
width: 250px;
list-style: none;
}
.rightcontent {
background: #FFF;
margin-left: 255px;
}
A page displays 12 images in rows of three each. If I use position:relative and absolute with height:100%, my styled div goes outside of the rightcontent div.