Take a look at 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 © example.com , All rights reserved. </div>
I have removed the content of firstrow,newsrow,mediarow and thirdrow for simplicity. Here is the CSS I am using:
#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;
}.mediarow{
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;
}
#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 issue is that I want the div with id content to adjust its length based on the largest div inside it. I have tried different values for the height property but nothing seems to work. What should I try next?
Thank you in advance.