I have multiple DIVs within my content container, some floating to the right and others to the left on screens larger than 400px.
See working example here: https://jsfiddle.net/cmbpt1hd/
I need the height of area-three to automatically adjust so it fills all the space below it on screens wider than 400px.
Please consider the following:
- There may be several DIVs above area-three that float to the right.
- There may also be numerous DIVs inside the content div that float to the left.
A CSS-based solution is preferred.
My Code
#content {
box-sizing: border-box;
width: 100%;
}
.area-one {
box-sizing: border-box;
float: right;
width: 30%;
background-color: #ffa2a2;
padding: 8px;
}
.area-two {
box-sizing: border-box;
float: left;
width: 70%;
background-color: #a4dca4;
padding: 8px;
}
.area-three {
box-sizing: border-box;
float: right;
width: 30%;
background-color: #8282ff;
padding: 8px;
}
#footer {
clear: both;
width: 100%;
background-color: #ff8282;
}
@media only screen and (max-width: 400px) {
.area-one,
.area-two,
.area-three {
float: none;
width: 100%;
}
}<div id="content">
<div class="area-one">
Area-one content goes here.
</div>
<div class="area-two">
Area-two content goes here.
</div>
<div class="area-three">
Area-three content goes here.
</div>
</div>
<div id="footer">
Footer content goes here.
</div>Desired Outcome