How to make two div´s next to each other have the same height?

Question

So I wrote a Web Application which has three div´s. One for the headline under that one on the left with a menu and next to that one in which the content will be loaded.

So I don´t want to set a static width and the content´s length changes. I have tried with overflow:auto but that did not work.

CSS:

body {
    margin: 0;
    padding:0;
    height:100%;
}

.area-header {
    height:40px;
    background-color:#71A4C3;
    margin-bottom: 20px;
    margin-left:20px;
    margin-right:20px;
}

.area-menu {
    width:300px;
    margin-left:20px;
    background-color:#8BC6EA;
    display:inline-block;
    margin-bottom:auto;
    padding-bottom:100%;
    height:100%;
}

.area-content {
    display:inline-block;
    position:absolute;
    margin-right:20px;
    margin-left:20px;
}

HTML:

<body>
     <div id="area-header" class="area-header">
         <h2>A Web Application!</h2>
     </div>

        <div id="area-menu" class="area-menu">
            <ul id="menu">
                @foreach (WebApplicationWithSqlAndJS.Models.MenuItem item in Model)
                {
                    <li id="menu-item"><a href="@item.Target" onclick="return false">@item.Title</a></li>
                }
            </ul>
        </div>

        <div id="area-content" class="area-content"></div>

</body>

possible duplicate of [How to create equal height columns in pure CSS](http://stackoverflow.com/questions/14763363/how-to-create-equal-height-columns-in-pure-css) — Turnip, Mar 13 '15 at 12:56
you could try `max-height: 300px //or whatever height it should have` — Doml The-Bread, Mar 13 '15 at 12:56
It's working fine.. http://jsfiddle.net/01qop5sr/ .. You could go with `min-width` instead as shown in the Fiddle.. — urbz, Mar 13 '15 at 13:08

score 1 · Accepted Answer · edited May 23 '17 at 12:06

You just need to add a parent div to the divs that you want to have same height.

parent div:

overflow: hidden;

child div:

float: left; padding-bottom: 500em; margin-bottom: -500em;

You can get equal height columns in CSS by applying bottom padding of a large amount, bottom negative margin of the same amount and surrounding the columns with a div that has overflow hidden. Vertically centering the text is a little trickier but this should help you on the way.

https://stackoverflow.com/a/1205485/2851845

   
body
{
    margin: 0;
}

.area-header
{
    height:40px;
    background-color:#71A4C3;
    margin-bottom: 20px;
    margin-left:20px;
    margin-right:20px;
}

#area-wrapper
{
    overflow: hidden;
    width: 100%;
}  

.area-menu, .area-content
{
    float:left;
    padding-bottom: 500em;
    margin-bottom: -500em;
}

.area-menu
{
    width: 200px;  
    background-color:#8BC6EA;
}

.area-content
{
    width: 400px;  
    background-color: LightSlateGrey;  
}

<body>
    <div id="area-header" class="area-header">
        <h2>A Web Application!</h2>
    </div>
    <div id="area-wrapper">
        <div id="area-menu" class="area-menu">
            <ul id="menu">
                <li id="menu-item"><a href="#" onclick="return false">@item.Title</a></li>
            </ul>
        </div>
        <div id="area-content" class="area-content">
            <div style="height:200px;background:red;"></div>
        </div>
    </div>
</body>

score 0 · Answer 2 · answered Mar 13 '15 at 13:18

0

You can set height of "area-content" div same as that of "area-content" div:

        <script>
        $(document).ready(function(){   
                heightToSet=$("#area-menu").height();
                $("#area-content").height(heightToSet);
        });
        </script>

answered Mar 13 '15 at 13:18

Sharry India

341
1
9

If dealing with dynamic content, or images, it would be a better idea if we use window.load instead of document.ready. In some cases, using document.ready, 0 will be returned as element's height, which will make the other element invisible. – Amar Syla Mar 13 '15 at 13:24
Both suggestions have for some reason no effect on the menu or the contents length – Joh Mar 13 '15 at 13:28
Also remove padding-bottom:100%;height:100%; from .area-menu class – Sharry India Mar 13 '15 at 13:37

How to make two div´s next to each other have the same height?

2 Answers2

Linked