0

I'm trying to make two full height bootstrap columns like the example here : Twitter bootstrap 3 two columns full height But the problem is that it show me the first column content (col-md-2) after the second one content (col-md-10).

<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">

<style type="text/css">



html,body,.m-container
{
    height:100%;
}
.m-container
{
    display:table;
    width: 100%;
    margin-top: 50px;


    -moz-box-sizing: border-box;
    box-sizing: border-box;
}


.row
{
    height: 100%;
    display: table-row;
}
.col-md-2 .no-float, .col-md-10 .no-float {
    float: none; 
}
.col-md-2
{
    float: none;
    display: table-cell;
    background: pink;
}
.col-md-10
{
    display: table-cell;
    background: yellow;
    float: none;
}
</style>

</head>
<body>
<header>Header</header>
<div class="m-container">
    <div class="row">
<!--  Data sources accordion  -->
<div class="col-md-2">
 <div class="well">I'm another well</div>
</div><!-- /end of col -->
        <!-- 
        Wall of panels 

         -->
<div class="col-md-10">


  <div class="col-md-6">
 <div class="well">I'm the first well</div>

</div>
<div class="col-md-6">
 <div class="well">I'm the second well</div>

</div>
<div class="col-md-6">
 <div class="well">I'm the third well</div>

</div>
</div>
</body>
</html>

I'm trying without using col-md-6 in the col-md-10 part and it works, but i should use col-md-6
Someone have an idea why i have this problem? Above the JSFiddle link to my code JSFIDDLE Code

Community
  • 1
  • 1
Dev java
  • 111
  • 3
  • 3
  • 9
  • 1
    First - your HTML is not correct. It looks like m-container and it's first row are not closed. Add tabs and it will be clear. Second - by default total amout of bootstrap columns indexes is 12. Inside col-md-10 total amount is 18. Third - add div with row class inside col-md-10. – Viktor Kireev Jul 01 '15 at 15:30
  • please indent your code, you will see a missing before body. – ssbb Jul 01 '15 at 15:31
  • Yeah i have a missing i've correct it but isn't this the problem – Dev java Jul 01 '15 at 15:34
  • @victor k sorry i don't undrestand your remarks add a row inside col-md-10 will changing nothing – Dev java Jul 01 '15 at 15:38
  • @victor k can you see this example please : http://stackoverflow.com/questions/25956065/divide-a-column-into-2-parts-in-bootstrap-3 – Dev java Jul 01 '15 at 15:43

0 Answers0