CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
U-L
U-L

Reputation: 2681

How to create multiple columns with space in between and same heights with Bootstrap

I have a parent div or class=row and two children with class=col-xs-6 each. I want there to be space between then but also have borders. So I added a child div to each. The col-xs-6 class gives a 15px padding, so I get my space. Now the problem is that I want them to be the same size.

My problem is that the second child div that contains the content is smaller than the first one. So the solid border is not drawn to equal heights. How can the child div inherit the parent size?

enter image description here

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <div class="container">
  <div style="background:yellow; padding:10px; display:table-row" class="row">
    <div class="col-xs-6" style="display:table-cell; float:none; border:dashed">
      <div style="background:gray; border:solid">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </div>
    </div>
    
    <div style="display:table-cell; float:none; border:dashed" class="col-xs-6">
      <div style="background:lightblue; border:solid;">
      <p class="text-center">hello world</p>
      <p class="text-center">foobar !</p>
      </div>
    </div>
  </div>
  </div>

Code: https://jsbin.com/babomib/edit?html,output

Basically, I want the div with blue background match the height of the parent. The parent would match the tallest div due to the table setup.

EDIT: as per the suggested answer, I added a fixed height to the parent div and then said height:inherit for the children. This seems to break the responsive stuff. The text bleeds through the divs.

enter image description here

<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

  <div class="container">
  <div style="background:yellow; padding:10px; display:table-row; height:400px" class="row">
<div class="col-xs-6" style="display:table-cell; float:none; border:dashed; height:inherit">
  <div style="background:gray; border:solid; height:inherit">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

<div style="display:table-cell; float:none; border:dashed; height: inherit" class="col-xs-6">
  <div style="background:lightblue; border:solid; height:inherit">
  <p class="text-center">hello world</p>
  <p class="text-center">foobar !</p>
  </div>
</div>
  </div>
  </div>

Upvotes: 1

Views: 749

Answers (2)

Victor
Victor

Reputation: 14622

You have to set the parent div to use

display: flex;

And the children to use 

flex: 1;

This will give you automatically equal heights.

You can find everything about about Flexbox here. I have also created a demo of this.

Upvotes: 2

Dave Lunny
Dave Lunny

Reputation: 770

You must explicitly set the height of your parent div container (ie: 100px) and then on your inner elements set the height to 100%.

You cannot just set height: 100% on an element if it's parent doesn't have an explicit height. If somewhere up the element tree there is a parent with an explicit height, and all the children's heights are set to 100%, then all of those children will be the exact same height as the parent with the explicit height declaration.

I'm not going to get into the how it's bad-practice to inline styles like you have in your example, or about how display: table-cell is an anti-pattern (tables are for data, not layouts). I will link you this updated fiddle so that you can see a working example of what you want:

https://jsbin.com/gifaxo/3/edit?html,output

If there is overflow, it's because #container has an explicit height of like 200px. You could set that to 100% too and then set it's parent (the body element I think) to 100% as well and then all elements will take up 100% height of the page. Overflow should default to scroll so you won't see ugly overflow.

Upvotes: -1

Related Questions