I'm having some issues with this layout. I can make 1 of the things work, just not both together. First of all, let me show you an image of what I'm trying to achieve:
3 columns same height
Description
This is a 3 columns Boostrap layout, with elements of variable height (more or less like in the image just in case it helps) and one of those variable height elements, the middle bottom one, holds 2 divs with 100% width and 50% height.
The problem and solutions I tried
The problem is I need to have all 3 columns to be the same height. After trying different solutions, I could achieve that. However, when I tried to add those 2 stacked divs with 50% height, I couldn't. As a matter of fact, I could do it using vh, but I don't want to use this approach. I thought flex could be the solution, but maybe because of my limitations, I couldn't do it, just got a 3 elements with the same size in the middle column, eg: orange box, top link, bottom link 50% height. And this is important because the layout was overlapped by 50%, so it seems I was really off with this approach (still thinking the solution has to be related to flex)
The code
So here is the code I have so far. Of course, I'm open to change both markup as well as the approach because it's possible I'm totally off base, but this is what I have so far:
.topzone{align-items:stretch ; height:100%; overflow:hidden; }
.firstcol, .secondcol, .thirdcol{padding:0; }
.firstcol, .buttoneer{background:#06a url(images/blue_noise.png); color:#fff;}
.colbox{padding:30px}
.buttoneer{height:100%; }
.linkbut{width:100%; height:50%; padding:16px; display:inline-block; font-size:36px; line-height:36px; vertical-align:middle; background:rgba(0,0,0,0.5); margin:10px auto;}<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container mainbody">
<div class="row topzone">
<div class="col-xs-12 col-lg-4 firstcol">
<div class="colbox">
<img src="images/image1.png" alt="" />
</div>
<div class="girl">
<img class="img-responsive" src="images/image2.jpg" alt="" />
</div>
</div>
<div class="col-xs-12 col-lg-5 secondcol">
<div class="girl">
<img class="img-responsive" src="images/image3.jpg" alt="" />
</div>
<div class="colbox buttoneer">
<div class="linkbut topbut"><a href="#">Top Link</a>
</div>
<div class="linkbut bottombut"><a href="#">Bottom Link</a>
</div>
</div>
</div>
<div class="col-xs-12 col-lg-3 thirdcol">
<div class="colbox">
<h2>Our Story</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit dui id tellus dictum ornare. Praesent luctus non justo sed pharetra. Quisque posuere vehicula urna, ac dignissim erat suscipit quis. Nam condimentum nibh in sapien finibus rutrum. Curabitur in mi vestibulum, condimentum odio sed, sollicitudin leo. Pellentesque vehicula lectus sed ligula vulputate, at efficitur metus interdum. Suspendisse nec dui id ipsum commodo porttitor. Donec maximus, tellus ut pretium tristique, odio lorem efficitur tortor, a ornare felis augue eget augue. Sed ac orci scelerisque, feugiat ex at, pulvinar neque. Donec vehicula sodales volutpat.</p>
</div>
</div>
</div>
</div>Final Considerations:
Please notice that I don't care about small screens, exception made of the 50% height buttons, since they'll be using col-xs-12 anyways, so this behavior is only for medium and large screens. Also, while I'll appreciate any help on this issue, I'm not looking for full code, at least not necessarily. If you post full code to solve the problem, I'd like to also know HOW and WHY it works so I can learn and do it by myself in the future.
Any answer absolutely appreciated, thank you in advance
Edit: I can see using Stack Overflow's Code Snippet it doesn't look the same as in my local version, which is probably because of the images.
2 Answers 2
This is going to be a "not sure why it works this way, but it does" answer. Maybe someone can shed further light. If you declare the height of each enclosing div explicitly, you can then declare the height of the buttons as 50% each, like so:
http://www.bootply.com/VASwIpqz8b
<div class="container-fluid" style="height:100%">
<div class="col-xs-4" style="height:50%;">
<div class="col-xs-12" style="height:100%">
<div class="row" style="height:100%">
<div class="tophalf"></div>
<div class="bottomhalf"></div>
</div>
</div>
</div>
CSS:
html,body{height:100%;}
.tophalf{
height: 50%;
background: blue;
}
.bottomhalf{
height: 50%;
background: red;
}
3 Comments
Is this close to what you need?
enter image description here
HTML:
<div class="row full-screen">
<div class="col-sm-4 firstcol col fix">
<div class="col-sm-12 firstcol-first-element"></div>
<div class="col-sm-12 firstcol-second-element"></div>
</div>
<div class="col-sm-5 secondcol col fix">
<div class="col-sm-12 secondcol-first-element"></div>
<div class="col-sm-12 secondcol-second-element fix">
<a href="http://placekitten.com/g/200/300" target="_blank" class="col-sm-12 top-link">Top link to kitten</a>
<a href="http://placekitten.com/g/200/300" target="_blank" class="col-sm-12 bottom-link">Bottom link to kitten</a>
</div>
</div>
<div class="col-sm-3 thirdcol col fix">
<div class="colbox">
<h2>Our Story</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce hendrerit dui id tellus dictum ornare. Praesent luctus non justo sed pharetra. Quisque posuere vehicula urna, ac dignissim erat suscipit quis. Nam condimentum nibh in sapien finibus rutrum.</p>
</div>
</div>
CSS: (Bootstrap css included in fiddle below)
.full-screen {
position: absolute;
top: 0px;
right: 0px;
bottom: 0px;
left: 0px;
margin: 0px;
}
a {
text-align: center;
}
.col {
height: 100%;
}
.fix{
padding: 0px;
margin: 0px;
}
.firstcol {
background-color: green;
}
.secondcol {
background-color: yellow;
}
.thirdcol {
background-color: yellow;
}
.firstcol-first-element {
height: 50%;
background-color: blue;
}
.firstcol-second-element {
height: 50%;
background-color: green;
}
.secondcol-first-element {
height: 60%;
background-color: red;
}
.secondcol-second-element {
height: 40%;
}
.top-link{
height: 50%;
background-color: grey;
}.top-link:hover{
opacity: 0.7;
}
.bottom-link{
height: 50%;
background-color: brown;
}.bottom-link:hover{
opacity: 0.7;
}
.colbox {
padding: 30px;
}
Check out the fiddle here:
UPDATED FIDDLE: