There seems to be a simple issue that I'm missing here. I have two columns that maintain the same height based on the content inside them, but the background color doesn't fully extend in the shorter column. When the display shrinks, the columns switch to a vertical layout using media queries. How can I make sure the background color of the left column reaches the bottom of the div?
#pageContainer {
width: 100%;
text-align: center;
}
#pageContainer p {
line-height: 10px;
}
.sectionContainer {
width: 80%;
margin: 0 auto;
display: table;
}
.leftColumn {
display: table-cell;
float: left;
width: 50%;
background-color: #4F4F4F;
color: #FFFFFF;
}
.rightColumn {
display: table-cell;
float: left;
width: 50%;
background-color: #EEEEEE;
color: #000000;
}
@media all and (max-width: 768px) {
.sectionContainer {
width: 100%;
}
.leftColumn {
width: 100%;
}
.rightColumn {
width: 100%;
}
}<div id="pageContainer">
<div class="sectionContainer">
<div class="leftColumn">
<h1>Left Column</h1>
<p>Left Column</p>
<p>Left Column</p>
<p>Left Column</p>
<p>Left Column</p>
<p>Left Column</p>
<p>Left Column</p>
<p>Left Column</p>
<p>Left Column</p>
<p>Left Column</p>
<p>Left Column</p>
</div>
<div class="rightColumn">
<h1>Right Column</h1>
<p>Right Column</p>
<p>Right Column</p>
<p>Right Column</p>
<p>Right Column</p>
<p>Right Column</p>
<p>Right Column</p>
<p>Right Column</p>
<p>Right Column</p>
<p>Right Column</p>
<p>Right Column</p>
<p>Right Column</p>
<p>Right Column</p>
</div>
</div>
</div>Here's the CodePen link to illustrate the problem: https://codepen.io/Macast/pen/ZaZrNz
Thank you!