CSS Display Issue - Aligned Divs Height [duplicate] - html

Question

This question already has answers here:
Align 2 DIV per line, both the with the same height
(4 answers)
Closed 4 years ago.
I am having a few issues getting 3 divs to align in a web page. Basically, I have 3 divs along side each other in a 'main' div. I want to set a minimum height on all 3 of the child divs, but have them expand to match the height of the largest of the 3. The crude image below shows the issue.
EDIT - To clarify, I am trying to get the 'Blue' and 'Red' sections (sideMenu, rightMenu and contentDiv) to expand automatically to reach the footer. As it stands now, the central div expands and leaves white space beneath the left and right 'Blue' sections.
My html looks like this -
<div class="mainDiv">
<div class="sideMenu">
<div class="vertical-menu">
<a id="uxLink_1" runat="server" href="1.aspx">1</a>
</div>
</div>
<div class="rightMenu" id="uxRightMenu">
<img alt="" src="" border="0" id="uxRightImage" runat="server"></img>
</div>
<div class="contentDiv">
<asp:ContentPlaceHolder ID="uxContentPH" runat="server">
</asp:ContentPlaceHolder>
</div>
</div>
<div class="footerBanner" id="uxFootBanner">
<center>
<img alt="" src="" border="0" id="uxFooterImage" runat="server" class="footerBannerImage"></img>
</center>
</div>
The CSS is as follows -
.mainDiv {
width: 98%;
min-width: 440px;
border: solid 5px black;
margin-top: -4px;
border-top: none;
overflow: auto;}
.contentDiv {
min-height: 700px;
height: auto;
font-size: 9.5pt;}
.sideMenu {
height: 100%;
min-height: 700px;
width: 150px;
float:left;
background-color: black;
border-right: solid 5px black;}
.rightMenu {
height: 100%;
min-height: 700px;
width: 115px;
float: right;
background-color: black;
border-right: solid 5px black;
padding-left: 5px;}
.footerBanner {
display: none;
width: 98%;
float:none;
background-color: black;
border: solid 5px black;
border-top: none;
min-width: 440px;
padding-top: 3px;}
.footerBannerImage {
width: 98%;
height: auto;
min-width: 440px;
max-width: 728px;
max-height: 90px;
min-height: 54px;}
.vertical-menu {
width: 150px;}
.vertical-menu a {
background-color: black;
color: white;
display: block;
padding: 12px;
text-decoration: none;}
.vertical-menu a:hover {
background-color: #37353d; }
.vertical-menu a.active {
background-color: #438210;
color: white;}

Answer 1

You should use % instead of px units for your child div tags.
It means if you add width: 50%; its width will be half of its parent element width.
So if you want to create something like that picture you should give width: 30%; to your side elements and width: 40%; to you bigger (center) element.
That should work fine. Also, delete every min-width & max-width property that you add to your child elements.

Answer 2

You can achive it with flexbox as well.
I've focussed in the layout only and I've ommited some of your markup:
.container {
display:flex;
flex-direction:column;
height:200px;
}
.container a{
color:#fff;
}
.mainDiv {
display:flex;
flex-grow:1;
justify-content:space-between;
}
.contentDiv {
flex-grow:1;
background:#f00;
}
.sideMenu {
display:flex;
flex-direction:column;
flex-basis:15%;
align-itens:start;
background-color: #00f;
}
.footerBanner {
background-color: #000;
height:20%;
}
<div class="container">
<div class="mainDiv">
<div class="sideMenu">
1
</div>
<div class="contentDiv">
</div>
<div class="sideMenu">
2</img>
</div>
</div>
<div class="footerBanner">
3
</div>
</div>
This is a helper tool for creating flexbox layouts quickly.