CSS: How to make left float div to adjust height dynamically?

Question

How can I make my floated left div with a static content to adjust automatically its height to the same height of the right floated div with a dynamic content?

So what I am trying to accomplish is that the both left and right div will have the same height (left div adjusting automatically to the right div's height)

Below is the sample code.

Thanks in advance :)

Cheers, Mark

<html>
<head>
    <style type="text/css">
        body {
            font-family:verdana;
            font-size:12px;
        }
        .parent {
            border:1px solid red;
            width:530px;
            /*min-height:100%;*/
            padding:5px;
        }
        .left {
            border:1px solid blue;
            width:200px;
            float:left;
            position:relative;
            padding:3px;
        }
        .right {
            border:1px solid green;
            width:300px;
            float:right;
            position: relative;
            padding:3px;
        }
        .clr { clear:both; }
        .footer {
            border:1px solid orange;
            position: relative;
            padding:3px;
            margin-top:5px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">float left div here only static content</div>
        <div class="right">
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
        </div>
        <div class="clr"></div>
        <div class="footer">Footer here</div>
    </div>
</body>
</html>

score 13 · Accepted Answer · answered Feb 25 '10 at 07:56

Here is the working CSS solution (thanks to pdr for the link):

<html>
<head>
    <style type="text/css">
        html, body {
            font-family:verdana;
            font-size:12px;
        }
        .parent {
            border:1px solid red;
            width:530px;
            padding:5px;
            overflow:hidden;
        }
        .left {
            border:1px solid blue;
            width:200px;
            float:left;
            position:relative;
            padding:3px;
        }
        .right {
            border:1px solid green;
            width:300px;
            float:right;
            position: relative;
            padding:3px;
        }

        /* a solution but doesn't work in IE */
        /*
        .left, .right {
            min-height: 100px;
            height: auto;
        }
        */

        .left, .right {
            padding-bottom:8000px;
            margin-bottom:-8000px;
            background:none repeat scroll 0 0 lightblue;
        }

        .clr { clear:both; }
        .footer {
            border:1px solid orange;
            position: relative;
            padding:3px;
            margin-top:5px;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="left">float left div here only static content</div>
        <div class="right">
            float right div dynamic content here<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
            dynamic row<br />
        </div>
        <div class="clr"></div>
        <div class="footer">Footer here</div>
    </div>
</body>
</html>

I can't set it as an accepted answer. It prompts "You can accept your answer in 21 hours." Guess I will just wait :) — marknt15, Feb 26 '10 at 07:00
This solutions only works in IE8, FF, Chrome, Safari and Opera. I just found out that this doesn't work in IE 7. I need to find another solution or just redesign the whole page. (-_-) — marknt15, Feb 26 '10 at 09:38

Nasser Hadjloo · Answer 2 · 2010-02-25T07:05:57.983

4

If I were you, I use a simple CSS trick. I'd assign the height for .Left and .Right in a css class like this

.Left, .Right
{
    min-height: 200px; /*because of .Left*/
    height: auto;
}

note that the above code uses whenever your height goes more than 200px then it will override the 200px value.

hope this help

Complete answer with Javascript

<script>
function increaseHeight()
{
   Document.getElementById('LeftDivID').style.height = Document.getElementById('RightDivID').style.height;
}
</script>

and you have to call it whenever youfinished increasing size of right div

edited Feb 25 '10 at 07:05

answered Feb 25 '10 at 05:30

Nasser Hadjloo

12,312
15
69
100

I tried your solution but it is wrong. Here is the screenshot: http://i.imgur.com/UzIoY.jpg If the right div dynamically adds a content then the left div's height will not adjust anymore. – marknt15 Feb 25 '10 at 06:42
it is because you set Right to Auto (I mean you are increasing it automatically and want to automattically increase a inrelevant element. to do such a thing you have to use javascript. – Nasser Hadjloo Feb 25 '10 at 07:03
@Mark - I have edit my answer witha javascript che4ck it out. – Nasser Hadjloo Feb 25 '10 at 07:06
Your JS answer looks good. I have a working CSS solution already but I will also try your JS solution because it seems 'exact height' compared to the CSS solution that I will post :) Thanks Sir :D – marknt15 Feb 25 '10 at 07:52

score 2 · Answer 3 · answered Feb 25 '10 at 07:11

2

A List Apart has a few excellent article on this subject, for example Faux Columns and Multi-column layouts climb out of the box

answered Feb 25 '10 at 07:11

Marius

57,995
32
132
151

score 1 · Answer 4 · answered Feb 25 '10 at 05:39

1

There are a number of options listed here

http://www.ejeliot.com/blog/61

Generally, I think you might want to ask yourself if you really want two columns. It could be that you're better off with your static content in the parent div and your dynamic content in a child div ([Edit] or vice versa).

answered Feb 25 '10 at 05:39

pdr

6,372
1
29
38

Thanks a lot pdr. I will post my solution. Your link led me to this solution: http://www.ejeliot.com/samples/equal-height-columns/example-6.html – marknt15 Feb 25 '10 at 07:49

score 1 · Answer 5 · answered Feb 25 '10 at 05:45

try out following code, I tried with firefox but hope it would work on most of all browsers

    <html>
<head>
    <style type="text/css">
        body {
            font-family:verdana;
            font-size:12px;
        }
        .parent {
            border:1px solid red;
            width:530px;
            /*min-height:100%;*/
            padding:5px;
        }
        .parent_new {
            border:1px solid red;
            width:530px;            
            padding:5px;
            display: table-cell;
        }
        .row_level
        {
            display:table-cell;
        }
        .cell-level {
            display:table-cell;
            border:1px solid red;
        }
        .left {
            border:1px solid blue;
            width:200px;
            float:left;
            position:relative;
            padding:3px;
        }
        .left {
            border:1px solid blue;
            width:200px;
            float:left;
            position:relative;
            padding:3px;
            display:table-row;
        }
        .right {
            border:1px solid green;
            width:300px;
            float:right;
            position: relative;
            padding:3px;
        }
        .clr { clear:both; }
        .footer {
            border:1px solid orange;
            position: relative;
            padding:3px;
            margin-top:5px;
        }
    </style>
</head>
<body>
    <div class="parent_new">
        <div class="row_level">
        <div class="cell-level">float left div here only static content
        </div>
        <div class="cell-level">
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
            float right div dynamic content here<br />
         </div>
        </div>
        <div class="clr"></div>
        <div class="footer">Footer here</div>
    </div>
</body>
</html>

Unfortunately I tested this but it doesn't work in IE browsers. Thanks though :) — marknt15, Feb 25 '10 at 06:30

CSS: How to make left float div to adjust height dynamically?

5 Answers5

Linked