I'm trying out using flex boxes to get columns to have the same height.
My page layout looks like this:
At the present I've used flex boxes to get the left column and the main column to be the same height. What I need to do is get the content division and the right division the same height. I tried doing but all it did was placed the right division below the content division.
This is my css
Is there a way to nest the content and the right box inside the main content box?
My page layout looks like this:
Code:
<body>
<div id="container">
<div id="site_header">
</div>
<div id="menu">
</div>
<div class="page_header">
</div>
<div id="content">
<div class="left">
<div class="left_content_box">
</div>
<div class="search">
</div>
<div class="left_content_box">
</div>
</div>
<div class="main_content" style="padding-right: 0 !important; padding-left: 0 !important; width: 584px !important;">
<div class="content_header ">
</div>
<div class="content">
<div class="breadcrumb">
</div>
<div class="main">
</div>
</div>
<div class="right">
<div class="right_content_box">
</div>
<div class="right_content_box">
</div>
</div>
<div class="content_footer">
</div>
</div>
</div>
<div class="page_footer">
</div>
<div id="site_footer">
</div>
</div>
</body>
This is my css
Code:
#container {
margin: 0 auto;
text-align: left;
width: 980px;
}
#content {
display:-moz-box; /* Firefox */
display:-webkit-box; /* Safari and Chrome */
display:-ms-flexbox; /* Internet Explorer 10 */
display: flex;
flex-flow: row;
justify-content: center;
margin: 0 auto;
width: 980px;
min-height: 600px;
}
.content {
float: left;
min-height: 500px;
padding: 0 10px 0 28px !important;
width: 317px;
}
.main_content {
-webkit-flex-grow: 0;
-webkit-flex-shrink: 0;
-webkit-flex-basic: auto;
-moz-flex-grow: 0;
-moz-flex-shrink: 0;
-moz-flex-basic: auto;
-ms-flex-grow: 0;
-ms-flex-shrink: 0;
-ms-flex-basic: auto;
min-height: 500px;
padding: 0 28px !important;
width: 528px !important;
margin: 30px 28px 30px 1px;
}
.content_footer {
float: left;
width: 742px;
padding: 0 !important;
margin: 0;
}
.site_footer {
margin: 0;
}
.page_footer {
width: 970px;
padding: 0 5px;
margin: 0;
}
.content_header {
float: left;
width: 564px;
}
.site_header {
margin: 0;
padding: 0;
}
.page_header {
width: 980px;
padding: 0;
margin: 0;
}
.left {
-webkit-flex-grow: 0;
-webkit-flex-shrink: 0;
-webkit-flex-basic: auto;
-moz-flex-grow: 0;
-moz-flex-shrink: 0;
-moz-flex-basic: auto;
-ms-flex-grow: 0;
-ms-flex-shrink: 0;
-ms-flex-basic: auto;
min-height: 500px;
padding: 0 !important;
width: 336px !important;
margin: 30px 0 30px 28px;
}
.right {
float: right;
padding: 0 !important;
width: 228px !important;
margin-left: 1px;
}
Comment