CODEWITHSUNDEEP
htmlcss
KevinRGT
KevinRGT

Reputation: 409

Make two parallel `<div>` colums the same height

Suppose I have two columns, both represented by a <div> block. Both columns may grow larger than the other, so I want to force the smaller one to grow as big as the other.

Example of my problem: http://jsfiddle.net/TvnSJ/

As you can see, the second column is smaller.

I managed to solve this using tables, but I was unable to add margin between them. The margin is important, so I would like to know another solution.

Upvotes: 2

Views: 11507

Answers (6)

Viktor
Viktor

Reputation: 65

Despite question #2 solves the question fully and satisfactorily, it has a big drawback to consider: It doesn't works in IE7 and below.

If you need too support old browsers, there's another approach based on padding, margin and overflow properties. It's a little bit tricky, but it works:

Define a container div, which works as a "colum-row", like this:

<div class="column-row"></div>

.column-row {overflow: hidden}

Then put some columns in it. And style them setting padding and margin to force a fake overflow:

<div class="column-row">
   <div class="column">Column 1</div>
   <div class="column">Column 2</div>
   ...
</div>

.column-row {overflow: hidden}
.column {float: left; padding-bottom: 99999; margin-bottom: -99999}

So, you'll get a bunch of columns which they looks equal sized, where their height value corresponds to the largest one.

I have edited the previows jsFiddle (now at http://jsfiddle.net/TvnSJ/16/) if you want to play with a working example.

Upvotes: 1

Rami.Q
Rami.Q

Reputation: 2476

if you want the same but using table: 

<table style="width: 100%;">
<tbody>
<tr>
    <td style="background: #006600;">a<br/>b</td>
    <td style="width: 5px;"></td>
    <td style="background: #BB0000;">a</td>
</tr>    
</tbody>
</table>

you can style your table and its cells as you like with paddings, margins, etc:

.TABLE-DEFAULT{    
    border          : 0px;
    border-collapse     : separate;
    border-spacing      : 0px;
    width           : 100%;
    background          : transparent;
}

.TABLE-DEFAULT td{
    padding: 4px;

}

.TABLE-DEFAULT td:FIRST-CHILD{
    padding: 0px;

}
.....etc

Upvotes: 1

ntt
ntt

Reputation: 436

This can be achieved in CSS3 with the new box model:

.box {
    width:100px;
    display:box;
    /* Firefox */
    display:-moz-box;
    -moz-box-orient:horizontal;
     /* Safari, Opera, and Chrome */
    display:-webkit-box;
    -webkit-box-orient:horizontal;
    /* W3C */
    display:box;
    box-orient:horizontal;
}

.box .column1 {
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-flex:1.0; /* Internet Explorer 10 */
    box-flex:1.0;
    background: yellow;
}

.box .column2 {
    -moz-box-flex:1.0; /* Firefox */
    -webkit-box-flex:1.0; /* Safari and Chrome */
    -ms-flex:1.0; /* Internet Explorer 10 */
    box-flex:1.0;
    background: green;
}

And the HTML

    <div class="box">
      <div class="column1">
          a<br>b
      </div>
      <div class="column2">
         a
      </div>
   </div>

I made this with the examples from here http://www.w3schools.com

Fiddle http://jsfiddle.net/w5ELr/

Upvotes: 2

Onimusha
Onimusha

Reputation: 3385

Here's another approach using 2 containers that I used recently

<div class="container2">
    <div class="container1">
        <div class="col1">
            a<br />b<br />c
        </div>
        <div class="col2">
            a
        </div>
    </div>
</div>

CSS:

.container2 {
    clear:left;
    float:left;
    width:100px;
    overflow:hidden;
    background:blue; /* column 2 background colour */
    color: white;
}
.container1 {
    float:left;
    width:100px;
    position:relative;
    right:50%;
    background:green; /* column 1 background colour */
    color: white;
}
.col1 {
    float:left;
    width:46%;
    position:relative;
    left:52%;
    overflow:hidden;
}
.col2 {
    float:left;
    width:46%;
    position:relative;
    left:56%;
    overflow:hidden;
}

Fiddle: http://jsfiddle.net/Lunf6/1/ Inspired from: http://matthewjamestaylor.com/blog/equal-height-columns-2-column.htm

Upvotes: 1

CRABOLO
CRABOLO

Reputation: 8793

To get two divs the same height automatically after adding content to one, you'll need to use javascript or jquery. Here is the below jQuery that can do this for you. Just change #column-1 to the ID of your first colum and #column-2 to the ID of your second column.

$(document).ready(function(){
    x = $('#column-1').height();
    y = $('#column-2').height();
        if x > y {
            $('#column-2').height(x);
        else {
            $('#column-1').height(y);
}
});

Upvotes: 0

Matthew Rapati
Matthew Rapati

Reputation: 5686

You can use display: table and display: table-cell. Here is your fiddle updated: http://jsfiddle.net/TvnSJ/2/

This makes the divs render like tds. Basically you can get the layout of a table without using a table when it is semantically incorrect. I don't think you can float them however.

Edit: I just noticed the bit about margin. You can add padding to these, or you could wrap the content in another element and add margin to that if you need the separation to not include the background colour.

Upvotes: 6

Related Questions