Is there a way to make the parent div stretch to fit its children div?
I attempted adding an element with clear: both; after the content, but it did not have the desired effect.
Here is the HTML structure:
<div id="wrapper">
<div class="left-menu">
</div>
<div class="right-bar">
<div class="right-content">
<div class="content">
<div class="content-wrapper">
<div class="content-body">
Here is content
</div
</div>
</div>
</div>
</div>
</div>
And here is the CSS styling:
.left-menu {
background-color: #0B0C0E;
width: 20%;
height: 100%;
float: left;
}
.right-bar {
background-color: #F0F0F0;
height: 100%;
width: 100%;
}
.right-content {
float: left;
width: 80%;
}
.right-content > .content {
padding: 21px 0 0 42px;
}
.right-content > .content > .content-wrapper {
width: 98%;
height: 70%;
}
.right-content > .content .content-body {
background-color: #FAFAFA;
padding: 20px;
font-size: 24px;
border: 1px solid #D0D0D0;
}
If you'd like to test this in a sandbox environment, feel free to visit
Thank you in advance for your help!