Reputation: 4859
I have 4 DIVs positioned like viewed in image. Div1 and Div 2 And Div 3 are placed inside the Footer Div. The contents of 3 Divs are dynamic and I don't know what height they need. How can I set these 3 divs height to a same value?
I've tried different solutions like setting top and button to 0px as here mentioned:
Make div 100% height of browser window
This is what I currently have:
This is my HTML Layout:
<div class="About">
<div class="RightAbout">
</div>
<div class="CenterAbout">
</div>
<div class="LeftAbout">
</div>
</div>
This is my CSS Classes:
.About
{
padding:0px;
background-color:#757575;
border:none;
min-height:250px;
color:White;
font-size:12pt;
}
.RightAbout
{
display:inline-block;
width:290px;
min-height:100%;
border-left:solid 1px #CDCDCD;
margin:0px 0px 0px 0px;
padding:0px 5px 0px 5px;
vertical-align:top;
background-color:blue;
}
.CenterAbout
{
display:inline-block;
width:290px;
min-height:100%;
border-left:solid 1px #CDCDCD;
margin:30px 0px 30px 0px;
padding:0px 5px 0px 5px;
vertical-align:top;
}
.LeftAbout {
display: inline-block;
min-height:100%;
border: none;
padding: 0px 5px 0px 5px;
margin: 30px 0px 30px 0px;
vertical-align: top;
}
Upvotes: 0
Views: 139
Reputation: 513
You seem to have the same problem as this individual:
How to Force Child Div to 100% of Parent's Div Without Specifying Parent's Height?
This should solve your problem and help with similar problems in the future:
Equal Height Columns with Cross-Browser CSS
Upvotes: 0
Reputation: 8981
Like this
css
body, html {
height: 100%;
}
.About
{
padding:0px;
background-color:#757575;
border:none;
min-height:250px;
color:White;
font-size:12pt;
display:table;
}
.RightAbout
{
display:table-cell;
width:290px;
min-height:100%;
border-left:solid 1px #CDCDCD;
margin:0px 0px 0px 0px;
padding:0px 5px 0px 5px;
vertical-align:top;
background-color:blue;
}
.CenterAbout
{
display:table-cell;
width:290px;
min-height:100%;
border-left:solid 1px #CDCDCD;
vertical-align:top;
background-color:#757575;
}
.LeftAbout {
display:table-cell;
min-height:100%;
border: none;
width:290px;
vertical-align: top;
background-color:#757575;
}
Upvotes: 4