Question

I am using display: table and display: cell to have 3 column layout with equal heights.

Here’s my code,

HTML:

<div id='wrapper'>
 <aside class='column'>Left sidebar</aside>
 <div id='main' class='column'>
     <textarea rows="2"></textarea><br>Main content <br>
     <br><br><br>
 </div>
 <aside class='column'>Right sidebar</aside>
</div>

CSS:

#wrapper {
    display: table;
}
aside {
    background-color:#EEE;
    margin:0;
    padding: 0;
}
.column {
    display: table-cell; 
}

JS

$('textarea').focus(function () {
    $(this).attr('rows',8);
});

Here’s the demo

Now,

When I focus on textarea, height of textarea increases, and thus the height of div#main increases too. This adds a padding-top to both aside‘s.

I am not sure if display:table and display:cell is the reason behind it, but I am not able to figure out the issue.

Answer 1

While I was writing this question, I figured out the issue, so sharing it to help others.

By default, the html element with display: cell has vertical-align: middle.

So, whenever height of one cell increases, content of other cell shifts because of vertical-align:middle. ( It was not a padding-top but vertical-alignment at middle of cell )

So, to fix the issue,

I added this to my css,

.column {
    display: table-cell; 
    vertical-align: top;
}