[RESOLVED] my div is not stretching with it's contents.

[BrownWarrior]

Hi,

The div id="testInnerCon" is not stretching with it's child elements causing the div="prevFooter" to be rendered in the wrong place and I can't for the life of me see the problem.

here is my css


#previewcon
{
width:900px;
}

#previewarea
{
width:900px;
}

#prevProjTitle
{
width:900px;
height:55px;
background:url(Testimonial_Graphics/LJN_TESTIMONIAL_TITLE_BACKGROUND.jpg);
}

#prevProjTitleP
{
text-align:center;
color:Black;
padding:20px 0px 0px 0px;
}

#testInnerCon
{
width:900px;
}

#details
{
width:300px;
float:left;
}

#prevRating
{
width:300px;
height:30px;
padding:15px 0px 15px 0px;
}

#prevRating li
{
list-style:none;
float:left;
}

#dateHeading
{
width:300px;
height:30px;
background:url(Testimonial_Graphics/LJN_TESTIMONIAL_DATE_HEADING.jpg);
}

#prevProjDate
{
width:300px;
height:30px;
padding-top:5px;
color:#222;
font-size:18pt;
text-indent:5px;
padding-bottom:7px;
}

#clientHeading
{
width:300px;
height:30px;
background:url(Testimonial_Graphics/LJN_TESTIMONIAL_CLIENT_HEADING.jpg);
}

.details
{
width:300px;
height:30px;
color:#222;
font-size:14pt;
text-indent:5px;
padding:0px;
}

#prevCompanyName
{
padding-bottom:10px;
}

#prevTest
{
width:600px;
height:300px;
float:left;
}

#prevFooter
{
width:900px;
height:5px;
background:url(Testimonial_Graphics/LJN_TESTIMONIAL_PREVIEW_FOOTER.jpg);
}



here is my html




<div id="previewcon" runat="server">
<div id="previewarea" >
<div><div id="prevProjTitle" >
<h1 id="prevProjTitleP" runat="server"></h1>
</div>
<div id="testInnerCon">
<div id="details">
<ul id="prevRating" runat="server">

</ul>
<div id="dateHeading"></div>
<div id="prevProjDate" runat="server"> </div>
<div id="clientHeading"></div>
<div id="clientDetails">
<p id="prevCompanyName" class="details" runat="server"></p>
<p id="prevTitle" class="details" runat="server"></p>
<p id="prevFirstName" class="details" runat="server"></p>
<p id="prevSurname" class="details" runat="server"></p>
</div>


</div>
<div id="prevTest"></div>
</div>
</div>
<div id="prevFooter"></div>
</div>
<button id="submitbutt" display="inherit" type="submit" runat="server">Submit</button>

</div>
</div>


can anybody see the problem?

if you want to view the page to see what it looks like you can view it here...

http://www.ljn.duncangravill.com/leave_testimonial.aspx


you have to fill out the form and press preview to see it.


thanks,

[Excavatorak]

Hello BrownWarrior,
It looks like you need to clear your floats (http://www.quirksmode.org/css/clearing.html).
Try
#testInnerCon {
width:900px;
oveflow: auto;
}

[BrownWarrior]

Thanks, That was exactly it! I'm still learning these rules of styling! Thanks for your help!