CODEWITHSUNDEEP
jqueryhtmlcss
Joh
Joh

Reputation: 166

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

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>

Upvotes: 2

Views: 758

Answers (2)

Navid EMAD
Navid EMAD

Reputation: 392

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>

Upvotes: 1

Sharry India
Sharry India

Reputation: 351

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>

Upvotes: 0

Related Questions