CODEWITHSUNDEEP
css
David Silva
David Silva

Reputation: 2017

Height of divs - should be equal and flexible

I would like to have three columns:

HTML, like this:

<div id="container">
    <div id="left_column">
        <p>text</p>
    </div>

    <div id="center_column">
        <p>loooooong text</p>
        <p>other text</p>
    </div>

    <div id="right_column">
    </div>
</div>​

Every column should have the same height (flexible)

I made demo http://jsfiddle.net/4hj4f/8/ - but this CSS is wrong - columns have different height

Upvotes: 0

Views: 36

Answers (2)

Selvamani
Selvamani

Reputation: 7684

Set container height. Its enough for set your condition.

#container {
height: 500px;            
}

Demo : fiddle

Upvotes: 0

sandeep
sandeep

Reputation: 92803

You can use display:table for this type of functionality. Write like this:

body, html{height:100%}
#container {
    height: 100%;   
   display:table;    
}

#left_column, #center_column, #right_column {
    display: table-cell;
    width: 200px;
    height: 100%;
    vertical-align:top;
}

Check this http://jsfiddle.net/4hj4f/9/

Upvotes: 1

Related Questions