Making two side by side div's heights equal

Question

So i'm comming from table design webpages and thought i'd give div and CSS a try, so I hope you can help me on this.

Situation:

I currently have the following div structure:

<div id="header">
    <div id="headline">

    </div>
    <div id="login">

    </div>
</div>
<div style="clear: both;" />
<div id="mainbody" style="border-top: black solid 2px;">
    <div id="menu">

    </div>
    <div id="bodyContent">

    </div>
</div>
<div style="clear: both;"></div>
<div id="footer"></div>

And I have the following CSS coding:

#mainbody
{
    background-color: white;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#menu
{
    width: 137px;
    float: left;
    background-color: #EEEEEE;
    padding-left: 3px;
}

#bodyContent
{
    float: right;
    width: 850px;
    background-color: white;
    padding: 5px;
}

#headline
{
    width: 693px;
    height: 75px;
    float: left;
    background-color: white;
    font-family: monospace;
    font-size: 48pt;
    font-weight: bold;
    padding-left: 7px;
}

#login
{
    height: 75px;
    width: 300px;
    float: right;
    background-color: white;
}

#header
{
    background-color: white;
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#footer
{
    border-top: black solid medium;
    width: 1000px;
    background-color: white;
    margin-left: auto;
    margin-right: auto;
    height: 50px;
}

Problem:

The "menu" and "bodyContent" divs have different heights through out my pages. So if i have a fairly large "bodyContent" page, the "menu" div will not go all the way down to the "footer" div. The same problem exists if the "menu" div is higher than "bodyContent" div.

I would like for both "menu" and "bodyContent" divs to have the same height/go down to the footer div.

I have tried looking for solution but the so far haven't got any result that i was expecting. I'm hoping you guys can help me on this.

Thanks

score 2 · Accepted Answer · answered Mar 20 '12 at 14:19

try this:

HTML

<div id="container3">
    <div id="container2">
        <div id="container1">
            <div id="col1">Column 1</div>
            <div id="col2">Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2Column 2</div>
            <div id="col3">Column 3</div>
        </div>
    </div>
</div>

CSS

#container3 {
    float:left;
    width:100%;
    background:green;
    overflow:hidden;
    position:relative;
}
#container2 {
    float:left;
    width:100%;
    background:yellow;
    position:relative;
    right:30%;
}
#container1 {
    float:left;
    width:100%;
    background:red;
    position:relative;
    right:40%;
}
#col1 {
    float:left;
    width:26%;
    position:relative;
    left:72%;
    overflow:hidden;
}
#col2 {
    float:left;
    width:36%;
    position:relative;
    left:76%;
    overflow:hidden;
}
#col3 {
    float:left;
    width:26%;
    position:relative;
    left:80%;
    overflow:hidden;
}

Example: http://jsfiddle.net/VdfJh/

and check this link:

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

Christoph · Answer 2 · 2014-08-13T21:01:51.943

Depending on the browsers you have to support, you can try different approaches.

A very new and nice solution is the new flexbox layout (spec) which has very good support nowadays and was intended for this kind of layout structures: Example.

Another clean solution is display:table, which forces your divs to behave like tables with all their advantages like equal height columns and without the disadvantages of the non-semantical tag-cluttering and inflexible structure. To achieve that, try the following:

parent{
   display:table;
}
.children{
   display:table-cell;
}

See the example fiddle

score 0 · Answer 3 · answered Mar 20 '12 at 13:57

0

I would try to remove the floats from menu and bodycontent, set both to display: inline-block; and set menu#height to 100%

Not tested, may fail

answered Mar 20 '12 at 13:57

stefan bachert

9,413
4
33
40

Making two side by side div's heights equal

3 Answers3

Linked