CSS height

[Ianlawton]

When i create a box with coloured background and drop text in i would like it to increse and decrease in height dependant on amout of text in the box, instead of adding a height attribute.

Can anyone help with this? here is link to a page i am working on, as you can see from the centre boxes, i have had to make them the same size, but there diff amounts of text and would like to box to fit around he amount of text.

DIV Class is 'sponsor' - code is attached

<snip>

Attach Code

.sponsorright{
background-color:#FFFFFF;
float:right;
width:380px;
height:auto;

}

.sponsor{
background-color:#FFFFFF;
text-align:left;
padding:7px;
margin: 0px 0px 10px 0px;
height:255px;
}

.sponsor a{
color:#000000;
text-decoration:none;
font-weight:bold;
}

.sponsor a:hover{
text-decoration:underline;
color:#000000;
height:15px;
margin:0;
padding:0;
}

.sponsor a.current{
color:#000000;
display:inline;
height:22px;
margin:0;
padding:0;
}

.sponsbck{
background-image:url(ccri_images/ccri_player_bck.gif);
text-align:left;
width:556px;
padding:10px;
}

#sponsorouter{
margin:0px auto;
height:8810px;
background-image:url(ccri_images/outer_grey.gif);
width:966px;
padding: 22px 12px 12px 12px;
}
#sponsorouter2{
background-color:#FFFFFF;
padding: 10px;
height:8590px;
}

#contactbck{
background-image:url(ccri_images/ccri_player_bck.gif);
text-align:left;
width:556px;
padding:10px;
}
.contact{
background-color:#FFFFFF;
text-align:left;
padding:7px;
margin: 0px 0px 10px 0px;
}

.righttext{
background-image:url(ccri_images/right_bck3.gif);
padding: 5px 12px 7px 12px;
}

.rightbase{
margin: 0px 0px 10px 0px;
}
.gallerypos{
padding: 7px 0px 7px 0px;
}

[edited by: swa66 at 1:17 pm (utc) on Oct. 23, 2008]
[edit reason] no personal URLs, see forum charter [/edit]

[swa66]

By default a div will stretch vertically to contain what's in the flow in it. Since I see a float that might be (or not, hard to tell) inside it, it's important to know that a float isn't part of the flow itself and hence it'll not be contained by a parent.
To fix it the easiest solution is to add an element in the html that "clears" the float and stays in the flow. A <br /> with clear:right after the floated right divs should do the trick.