Keep columns with same height

Question

I'm trying to keep two columns with same height using display: table. What I did:

.col-sm-12
   aside
   .main-content

And the CSS

.col-sm-12{
  display: table;
  height: 100%;
}

aside{
  display: table-cell;
  height: 100%;
  width: 25%;
  background: green;
}

.main-content{
  display: table-cell;
  height: 100%;
  width: 75%;
}

Worked fine. But when I added content to aside, the content goes to de bottom.

you will need js sadly. – Daniel Cheung Nov 04 '14 at 11:25 — Daniel Cheung, Nov 04 '14 at 11:25

score 3 · Accepted Answer · answered Nov 04 '14 at 13:40

First, you should use Bootstrap grid instead of width in percents.

That said, to get two floating (and dynamic) columns to have the same height, you can use this trick:

set overflow: hidden on the columns parent
add margin-bottom: -5000px; padding-bottom: 5000px to the columns

Working example (I used -xs instead of -sm for example purpose only):

.wrapper {
  overflow: hidden;
}
aside{
  background: forestgreen;
  padding-bottom: 5000px;
  margin-bottom: -5000px;
}
.main-content{
  background: tomato;
  padding-bottom: 5000px;
  margin-bottom: -5000px;
}

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-xs-12">
  <div class="row wrapper">
    <aside class="col-xs-3">
      Aside<br>
      Aside<br>
      Aside<br>
      Aside<br>
      Aside<br>
      Aside<br>
      Aside<br>
      Aside<br>
      Aside<br>
    </aside>
    <div class="col-xs-9 main-content">
      Main content<br>
      Main content<br>
      Main content<br>
      Main content<br>
      Main content<br>
    </div>
  </div>

harshakasireddy · Answer 2 · 2014-11-05T04:30:24.827

This method uses margins, paddings, and overflow to force the columns to be equal heights. The methodology entails setting a big enough padding at the bottom of each floated element, and countering it with an equal negative margin at the bottom of the same elements. The trick is to set the overflow on the parent container to hidden.

Here is HTML and CSS:

<div class="main">
<div class="container clearfix">
    <div class="content">
        <section>
            <h1>This is the Main Content</h1>
            <hr>
            <h2>A sub heading</h2>
            <p>Lorem ipsum dolor sit amet, consectetur...</p>
        </section>
    </div>
    <div class="sidebar">
        <aside>
            <h2>This is a sidebar</h2>
            Sign up to the newsletter!
        </aside>
    </div>
</div><!-- /.containter -->

.main .container {
    padding-right: 330px;
    overflow: hidden;
}
.content {
    float: left;
    width: 100%;
    background-color: orange;
}
.sidebar {
    float: right;
    margin-right: -330px;
    width: 300px;
    background-color: olive;
}
.content,
.sidebar {
    padding-bottom: 99999px;
    margin-bottom: -99999px;
}
section,
aside {
    padding: 30px
}

This could be extended to multiple rows for a more grid-like layout instead of just two columns. You can also use fluid width columns if you want.

Here is js fiddle Demo

Reference Link http://knowwebdevelopment.blogspot.in/2014/10/css-equal-height-columns-three.html

score 0 · Answer 3 · answered Nov 04 '14 at 12:45

Setting the height of the element to 100% wil not allways work because it looks at to its parent object for that size.

This is what i suggest:

html:

<div class="row">
    <div class="col-xs-4 tall">25%</div>
    <div class="col-xs-8 tall">75%</div>
</div>

css:

.tall {
    border: 2px dotted black;
    height: 200px;
}

The fiddle: My Solution

Keep columns with same height

3 Answers3

Linked