ansaurus

Question

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

Answer 1

+1 A:

dear marknt15.

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

Nasser Hadjloo 2010-02-25 05:30:47

I tried your solution but it is wrong. Here is the screenshot: http://i.imgur.com/UzIoY.jpgIf the right div dynamically adds a content then the left div's height will not adjust anymore.

marknt15 2010-02-25 06:42:47

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 2010-02-25 07:03:23

@Mark - I have edit my answer witha javascript che4ck it out.

Nasser Hadjloo 2010-02-25 07:06:24

@Nasser: 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 2010-02-25 07:52:45

Answer 2

+1 A:

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).

pdr 2010-02-25 05:39: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 2010-02-25 07:49:15

Answer 3

+1 A:

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>

Tumbleweed 2010-02-25 05:45:20

Unfortunately I tested this but it doesn't work in IE browsers. Thanks though :)

marknt15 2010-02-25 06:30:29

Answer 4

+1 A:

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

Marius 2010-02-25 07:11:41

Answer 5

A:

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>

marknt15 2010-02-25 07:56:36

Why not mark it as the accepted answer? Interesting thread.

David Andersson 2010-02-25 07:59:24

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 2010-02-26 07:00:46

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 2010-02-26 09:38:27

ansaurus

tags:

views:

answers:

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

related questions