ansaurus

Question

Answer 1

+1 A:

This is the eternal css column height issue. There are some (painful) ways to work around it with pure css, but I've been happy using this jQuery plugin: http://www.cssnewbie.com/equalheights-jquery-plugin/

It's not the "right" way to handle it but in my experience it's the only way that won't drive you insane.

joeynelson 2010-07-06 12:48:39

Answer 2

A:

I usually use this snippet of jQuery..

function equalHeight(group) {
    var tallest = 0;
    group.each(function() {
        var thisHeight = $(this).height();
        if(thisHeight > tallest) {
            tallest = thisHeight;
        }
    });
    group.height(tallest);
}

equalHeight($('.your-divs'));

Peter Smeekens 2010-07-06 12:56:34

Answer 3

A:

Is that ok ?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Untitled Document

    <style>

        #content
        {
            width:600px;
            height:auto;
            overflow:hidden;
            background-color:#FF3399;
        }

        #content1
        {
            width:300px;
            background-color:#3333CC;
        }

        #content2
        {
            width:300px;
            overflow:hidden;
            float: right;
            background-color:#CCFF66;
        }


    </style>


</head>

<body>

    <div id="content">



        <div id="content2">
            2
            <br/>
            <br/>
            <br/>
            <br/>
            <br/>

        </div>
        <div id="content1">

            1
            <div style="clear: both"></div>
        </div>


    </div>



</body>

T1000 2010-07-06 13:23:10

Answer 4

A:

this solution is what i was looking for but i have a very important question i want to place a div at bottom of the content1 with a static height and width but i can't do it because the div just wont go there the div can also be an imgage, you can't use position:absolute because the content1 div height will not be static so the div in it will not be in one place all the time. I'm using a solution that helped me a lot and I just want to add to it that div at the bottom on content1. So it looks like this content1 have got 2 divs one in the top as first and the other in the bottom. It is very important to use this code because it fixes the div height problem that I mentioned:

    <style>

    #content
    {
        width:600px;
        height:auto;
        overflow:hidden;
        background-color:#FF3399;
    }

    #content1
    {
        width:300px;
        background-color:#3333CC;
    }

    #content2
    {
        width:300px;
        overflow:hidden;
        float: right;
        background-color:#CCFF66;
    }


</style>

<div id="content">



    <div id="content2">
        2
        <br/>
        <br/>
        <br/>
        <br/>
        <br/>

    </div>
    <div id="content1">

        1
        <div style="clear: both"></div>
    </div>


</div>

RED 2010-07-07 08:20:48

ansaurus

tags:

views:

answers:

DIV height problem when floated

related questions