Question

See this code:

<div id="content">
    <div id="firstrow">    

    </div>
    <div id="secondrow">
        <div class="newsrow">    </div>
        <div class="mediarow">    </div>
    </div>
    <div id="thirdrow">

    </div>
</div>

<div id="footer">
    <ul>
        <li>Home</li>
        <li>Link1</li>
        <li>Link2</li>


    </ul>
</div>
<div id="lastpart">Copyright 2004 - 2011 &copy; example.com , All rights reserved. </div>

I deleted all contents of firstrow,newsrow,mediarow and thirdrow for simplicity. here is my css:

#content{
    width:1250px;
    position: relative;
    top: 0px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
    background: url("imgbg_body_03.png");
    right: 66px;
    height:2550px;

}


#firstrow{
    margin: 0px  20px 0 0;

    width:195px;
    float:right;
}

#secondrow{
    background-color:#772255;
    width:740px;
    float:right;
}
.newsrow{

    width:366px;
    float:right;
    margin: 2px 2px 2px 2px;
    text-align:right;
    color:#660066;
    /*font:bold 16px Arial;*/
}.mediarow{
    /*background:url('imgbg_index_01.png');*/
    width:366px;
    float:right;
    margin: 2px 2px 2px 2px;
}
#footer{
    background: url("imgbg_body_02.png");
    width:1250px;
    height:38px;
    position: relative;
    top: 0px;
    right:66px;
    margin: 0 0 0 0;
    padding: 0 0 0 0;
}
#footer ul{
    margin: 0px 0 0 0;
    padding: 5px;/* 0 0 0;*/
}
#footer ul li{
    list-style-type:circle;
    display:inline;
    color:white;
    margin : 0 35px 0 35px;
    font:bold 12px Tahoma;
}
#footer ul li:hover{
    color:#FFFF00;
}
#lastpart{
    width:1250px;
    position: relative;
    top: 0px;
    margin: 0 0 0 0;
    padding: 20px 0 0 0;
    background: url("imgbg_body_04.png");
    right: 66px;
    text-align:center;
    font-weight:bold;
    color:#660033;
    height:56px;
    direction: ltr !important;
}

my problem is I want div with id content go longer or shorter according to biggest div inside it.I tried every possible value for Height but no one was useful. what should I do?

Thanks in advance.

Answer 1

before you close <div id="content"> add a div with class clear and the css:

.clear {
    clear: both;
}

so you html would look like this:

<div id="content">
    <div id="firstrow">    

    </div>
    <div id="secondrow">
        <div class="newsrow">    </div>
        <div class="mediarow">    </div>
    </div>
    <div id="thirdrow">

    </div>
    <div class="clear"></div>
</div>

<div id="footer">
    <ul>
        <li>Home</li>
        <li>Link1</li>
        <li>Link2</li>
    </ul>
</div>
<div id="lastpart">Copyright 2004 - 2011 &copy; example.com , All rights reserved. </div>