DIV height issue when swimming

Question

DIV height issue when swimming

Hi, I have a problem regarding a floating div that I cannot understand. I know that many people have the same problem, but I did not find a normal solution. maybe you can help me? I want the div on the left to increase in height when the one on the right grows in height. The one on the right will dynamically develop, because the text or other things in it will have different sizes.

This is the code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2">


<style>

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

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

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


</style>


</head>

<body>

<div id="content">

    <div id="content1">

    1

    </div>

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

    </div>

</div>



</body>
</html>

+3

html

Red Jul 6 '10 at 12:40

source share

4 answers

joeynelson · Answer 1 · 2010-07-06T12:48:39+0000

This is the eternal css column height. There are several (painful) ways to get around it with pure css, but I was happy with this jQuery plugin: http://www.cssnewbie.com/equalheights-jquery-plugin/

"" , , , , .

Peter Smeekens · Answer 2 · 2010-07-06T12:56:34+0000

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'));

T1000 · Answer 3 · 2010-07-06T13:23:10+0000

?

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

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

RED · Answer 4 · 2010-07-07T08:20:48+0000

- , , : div 1 , , div , div , : , content1 div , div . , , , div content1. , , 1 2 divs , , . , div, :

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

DIV height issue when swimming

More articles: