How to get equal content and sidebar (height)? - html

Question

OK Im using bootstrap and i have main content and inside main content i have left and right side. On left side its content and on right side i have 8 boxes. I tried everything but i cant get equal left and right side.
.main-content{
float: left;
width: 100%;
position: relative;
}
.main-content .right-box.col-md-4{
width: 37.5%;
padding-left:0;
padding-right:0;
float:right;
position:absolute;
top:0;
bottom:0;
right: 0;
}
.main-content .left-box.col-md-8{
width:62.5%;
padding-left:0;
padding-right: 0;
background-color: #fff;
float: left;
position: relative;
}
FIDDLE: https://jsfiddle.net/rvqg3fd7/
and last div on right side need to be same height like div on left side..
I tried this but without succes.

Answer 1

Height is an element you shouldn't force in a Bootstrap powered website, simply because Bootstrap relies on it's vertical flexibility to respond to smaller devices. After all, this is the main purpose why anyone would use Bootstrap. Yet, if you do insist, then you must give each element a definite height and control such height with paddings.
You didn't provide a code we could use (not even the fiddle) so I'll post my demo so you can see the bootstrap classes architecture you need to achieve this;
Here is the HTML
<div class="container">
<div class="row main-content">
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="row">
<div class="box left">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6">
<div class="row">
<div class="box right">
<div class=" innerbox col-xs-12">
1
</div>
<div class=" innerbox col-xs-12">
2
</div>
<div class=" innerbox col-xs-12">
3
</div>
<div class=" innerbox col-xs-12">
4
</div>
<div class=" innerbox col-xs-12">
5
</div>
<div class=" innerbox col-xs-12">
6
</div>
<div class=" innerbox col-xs-12">
7
</div>
<div class=" innerbox col-xs-12">
8
</div>
</div>
</div>
</div>
</div>
</div>
And the CSS
.box.left{
background:red;
text-align:center;
color: white;
height:350px;
}
.box.right{
background:blue;
text-align:center;
color: white;
height:350px;
padding:10px
}
.innerbox{
background:lightgray;
text-align:center;
color: black;
height:30px;
margin-top:10px;
}
.main-content{
float: left;
width: 100%;
position: relative;
}
And the link to the DEMO