CODEWITHSUNDEEP
html
RED
RED

Reputation: 31

DIV height problem when floated

Hi I have a problem cosidering a floating div that i can't figure out. I know many people have got the same problem but i have not found a normal solution. maybe you can help me ? I want that the div on the left will grow on it's height when the one on the right will grow it's height. The one on the right will grow dynamicaly, because the text or other things in it will have diffrent 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>

Upvotes: 3

Views: 108

Answers (4)

RED
RED

Reputation: 31

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>

Upvotes: 0

T1000
T1000

Reputation: 2941

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>

Upvotes: 0

Peter Smeekens
Peter Smeekens

Reputation: 664

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

Upvotes: 0

joeynelson
joeynelson

Reputation: 405

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.

Upvotes: 1

Related Questions