Can't get div to expand in size

[defroster]

Hello,

 

In my stylesheet I have the following:

.main
{
padding: 0px;
margin-top: 20px;
height: 420px; 
border:1px dashed #000000;
margin-bottom: 20px;
width:620px;
webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
background-color: #f2f2f2;
}

 

If I remove the height tag my div doesn't expand as the content fills it.. how can I make the height auto-resisze as content fills the div?

 

Thanks /df

[haku]

I'm assuming that the content inside is all floated? If it is, then you can add:

 

overflow:auto;

 

and remove the height.

[defroster]

Thanks for quick reply! The overflow made it possible to scroll within the div.. the div itself didn't expand ..

[haku]

You didn't remove the height then.

 

Edit: or if you did, post the relevant HTML.

[defroster]

Hmm. Yes, I did remove the height... But I'll post the code here.  Thanks for help!!

 

The HTML

<div class='main'>

<div class='voting area'>

   <div class='title' align='center'>Vote</div>

    <div class='report'><a href="report_exe.php?v=7794" onclick="return popitup('report_exe.php?v=7794')">report</a></div>

</div>

<div class='video area'>
  <div class='title'>The ballerina dog</div>
  <div class='titletext'>Dog with a skirt</div>
  <img src='photo22'><br />

   <div class='titletext'>Posted 2 months ago </div>		

</div>
</div>

 

The stylesheet

.main
{
padding: 0px;
margin-top: 20px;
overflow:auto;
border:1px dashed #000000;
margin-bottom: 20px;
width:620px;
webkit-border-radius: 20px;-moz-border-radius: 20px;border-radius: 20px;
background-color: #f2f2f2;
}

.votingarea
{
float:right; height:130px; width:55px; margin-top:5px; margin-left:0px; margin-right:15px;  border:0px dashed #000000;
}

.report{
float:right; height:50px; width:55px; margin-top:135px; margin-right:0px;  border:0px dashed #000000;
background-color: #f2f2f2;
text-align: center;

}
.videoarea
{
padding-top: 0px;
padding-bottom: 0px;
float:left; width:530px; text-align:left; margin-left:15px; margin-top:10px;height:380px;  border:0px solid #000000;
font-weight:bold;

font-size:18px;

}

.title {
font-weight: bold;
font-size: 18px;
border:0px dotted #000000;
}

.titletextprofile {
font-size: 14px;
border:0px dotted #000000;
}

 

Thanks a million. Instead of a scrollbar in the 'main' div I would like it to expand?!?

[haku]

I just copied and pasted your code into a document - I wasn't seeing scrollbars in any browser. What browser are you using?

[defroster]

It's strange. I had simplified the code a bit and just taken the important parts, and when I used the code I uploaded here it seems to expand as well.. This is really doing my head in. Thanks for your help anyways

[defroster]

Problem solved. Finally. All I needed to do was to remove a specified height on a div I had within the div I wanted to expand. Thanks for helping out!