0

I want to make two divs equal heights – left and right divs.

I referred the following posts and found a bottom padding approach.

  1. How do I achieve equal height divs (positioned side by side) with HTML / CSS ?
  2. CSS: How to make left float div to adjust height dynamically?

I tried to apply this concept in my page; but it doesn’t work correctly. On top of the right div there is unwanted space. How can we rectify it?

enter image description here

CODE

   <!DOCTYPE html>

<style type="text/css">
    .myContent {
        width: 100%;
        border: 2px solid violet;
        min-width: 1210px;
    }

    .myHeader {
        width: 100%;
        /*width: 1200px;*/
        clear: both;
        background-color: #DFE8EF;
        border: 1px solid red;
    }

    .leftPart {
        border: 1px solid red;
        width: 200px;
        height: 200px;
        float: left;
        background-color: silver;
    }

    .rightPart {
        border: 1px solid orange;
        background-color: beige;
        float: left;
        min-width: 1000px;
        /*
        margin-bottom: -1000px;
        padding-bottom: 1000px;
        margin-right: -5000px;
        padding-right: 5000px;
    */
    }
</style>

<html>
<head>
    <title>UpdateAccrualByItem</title>


    <link href="Content/MasterLayoutStyle.css" rel="stylesheet" type="text/css" />

</head>
<body>

    <div id="body">
        <div class="myContent">

            <div class="myHeader">
                <img src="/Images/logo_header.jpg" />
            </div>

            <div class="leftPart">
                Menu
            </div>
            <div class="rightPart">

                <h2>UpdateAccrualByItem</h2>
            </div>

        </div>
    </div>

</body>
</html>
Community
  • 1
  • 1
LCJ
  • 22,196
  • 67
  • 260
  • 418

1 Answers1

1

You are very close, but just have a few little things wrong.

You don't need a width for the right column, just the default width:auto. I used the same negative margin and padding trick to make the right column's height the size of the left's height and also to give the right column the illusion of taking up the rest of the space. You also should float the right container and take away the margin. You can remove the clear:both of the left column because it's not used

Demo here

.leftPart {
    border: 1px solid blue;
    width: 200px;
    height:200px;
    float:left;
    background-color: orange;
}
.rightPart {
    border: 1px solid orange;  
    background-color: beige;
    float:left;
    margin-bottom: -1000px;
    padding-bottom: 1000px;
    margin-right: -5000px;
    padding-right: 5000px;
}

Edit

You might also add some type of @media query to allow adjusting the window to look more smooth. Here is an example. It's semi-hard coded based on the text length in the example, but on your final product it might be something you add on at the end

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147
  • Apologies for unmarking the answer. I updated the question. It doesn't work with that layout. I need to have the min-width. Any resolution with this? – LCJ Aug 29 '13 at 09:59
  • So when the window is smaller than 1200px, the min-width of the right element plus the width of the left element, do you want a scrollbar to come up? Do you want the content outside the window hidden? What behavior do you want? – Zach Saucier Aug 29 '13 at 12:04
  • When the window width is less than 1200px, remianing items need to be `hidden`. – LCJ Sep 02 '13 at 07:14
  • If that's the case, is [**this**](http://jsfiddle.net/Zeaklous/9jnbA/2/) what you're looking for? If not, perhaps it is something more like [**this instead**](http://jsfiddle.net/Zeaklous/9jnbA/3/)? You're still not very clear – Zach Saucier Sep 02 '13 at 13:53