CSS border in Firefox doesn't hold all content

CSS border in Firefox

[frist44]

I have a small graphic with some text. There's a container div that has a thing border around all of the content. The page looks fine in IE, but the border doesn't all the content in Firefox. Is there something I should be looking for with compatability?

Here is the main page:

<div class="pictureframe">
<asp:Image ID="imgEmployee" runat="server" Height="150px" ImageAlign="AbsMiddle"
Width="150px" />
</div>
<div class="spacer">
</div>
<div class="profileholder">
<asp:Label ID="lblFirstname" runat="server" CssClass="bold"></asp:Label>
<asp:Label ID="lblLastname" runat="server" CssClass="bold"></asp:Label>&nbsp;<asp:Image
ID="imgFlag" runat="server" /><br />
<asp:Label ID="lblLocation" runat="server" CssClass="smaller"></asp:Label><br />
<asp:Label ID="lblPosition" runat="server" CssClass="smaller"></asp:Label><br />
<br />
<strong>Worked at TCG</strong>:
<asp:Label ID="lblMonths" runat="server"></asp:Label>
months<br />
<strong>Hobbies:</strong>
<asp:Label ID="lblHobbies" runat="server"></asp:Label><br />
<strong>Food:</strong>
<asp:Label ID="lblFood" runat="server"></asp:Label><br />
<strong>Music:</strong>
<asp:Label ID="lblMusic" runat="server"></asp:Label><br />
<strong>One want:</strong>
<asp:Label ID="lblWant" runat="server"></asp:Label><br />
<br />
</div>
<div style="float: left;">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="http://www.domain.com"
Target="_blank">Add my profile...</asp:HyperLink>
</div>
<div style="float: right;">
<asp:ImageButton ID="imgBack" runat="server" AlternateText="Back" ImageUrl="~/images/back.png" OnClick="imgBack_Click" />&nbsp;
<asp:ImageButton ID="imgPlay" runat="server" AlternateText="Play/Stop" Width="32" Height="32" ImageUrl="~/images/stop.png" OnClick="imgPlay_Click" />
&nbsp;<asp:ImageButton ID="imgNext" runat="server" AlternateText="Next" ImageUrl="~/images/next.png" OnClick="imgNext_Click1" /></div>
</div>

#container
{
width: 585px;
border: solid 1px black;
vertical-align:top;
padding: 5px 5px 5px 5px;
}

.pictureframe
{
float:left
}

.spacer
{
width: 10px;
float: left;
height: 150px;
}

.profileholder
{
}

[Marshall]

frist44,

Welcome to WebmasterWorld.

First, I do not see a container <div> in your HTML. My two recommendations are: set your container height to 100%, then after the last </div> and before the </div> for the #container, insert
<br style="clear:both;" /> (delete the end forward slash if you are not using XHTML doctype) Also, add to your CSS:
body {height: 100%;}

Hope this helps.

Marshall

[Demaestro]

You can also try:

#container
{
width: 585px;
border: solid 1px black;
vertical-align:top;
padding: 5px 5px 5px 5px;

overflow:auto;

}

[frist44]

<br style="clear:both;" /> fixed it!

thanks for the help!

[Demaestro]

Ya Marshall is the man... helped me through some goodies too.