How to make 2 horizontal divs the same height

Question

I have a div containing 2 other divs.

<div id="centerDiv">
    <div id="menuTab"><?php include 'MenuEquipos.php'; ?>   </div>
    <div id="programaTab"></div>                        
</div>

the rigth div is populated using ajax and it will grow dynamicly. So some times

#menuTab.Heigth > #programaTab.Heigth

and some times

#menuTab.Heigth < #programaTab.Heigth

how can i make the 2 div same heigth as the heigth?

css:

#centerDiv{
    margin: 0 auto;
}

#menuTab{
    background-color: #636977;
    vertical-align: top;
    margin-left: 12%;
    width: 16%;
    min-height: 400px;
    float: left;
    border-bottom: 2px solid black;
    border-top: 2px solid black;
    border-right : 2px solid black;
    border-left : 2px solid black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-color: lightsteelblue;
}

#programaTab{
    margin-left: 5px;
    border-left: 5px;   
    float: left;
    min-height: 400px;
    min-width: 400px;
    border-bottom: 2px solid black;
    border-top: 2px solid black;
    border-right : 2px solid black;
    border-left : 2px solid black;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-color: #636977;
    visibility:hidden;
}

score 0 · Answer 1 · answered Jul 01 '13 at 17:22

0

I am not sure if it is still the current practice, because I am out of the web development for a while, but I remember it used to be done this way http://wellstyled.com/css-2col-fluid-layout.html

answered Jul 01 '13 at 17:22

Honza Brabec

37,388
4
22
30

score 0 · Answer 2 · answered Jul 01 '13 at 17:22

0

you will have to use javascript

on your ajax complete event calculate the height of both the divs and give them the height accordingly

answered Jul 01 '13 at 17:22

Sahotataran

51
3

How to make 2 horizontal divs the same height

2 Answers2

Linked