DIV's in DIV's - Issues with Margins

[JohnPorier]

I'm having an issue with margins where 2 DIV's inside of one DIV aren't acting the way I would expect them to. The reason I have 2 DIV's insisde 1 DIV is because these DIV's need to be coded separately but appear on the page side by side. Basically it is a User DIV and a Vote DIV. You can see the username and the vote buttons next to the user.

For some reason no matter how I set the margin or what CSS I use, I end up with an issue on a particular browsers. When I set a margin-right, everything looks good but IE occasionally will throw the Vote DIV on the next line of the page instead of with the username. These two DIV's are inside of one DIV so I'm not sure how the 2 internal can break away.

Any help is appreciated, Thanks!

[HTML CODE]

<div class='pingit'>
<div class='pingleft'>

<div id='navcontainer'>
<ul id='navlist'>

<li><br /><a href='#'>";
echo $participant_row['gp_event_user'];
echo "<font color='#FF8753'>[24]</font></a> </li>

</ul>
</div>

</div>
<div class='ping'>

<div id='navvcontainer'>
<ul id='navlist'>

<li><a href='#'><img src='http://localhost/comm/img/up.gif' border='0' /></a></li>
<li><a href='#'><img src='http://localhost/comm/img/down.gif' border='0' /></a></li>

</ul>
</div>

</div>
</div>

[CSS CODE]

.pingit

{

float:left;
margin-right:20px;
border: 0px solid #ffffff;
color: #ffffff;

}

.ping

{

border: 0px solid #ffffff;
float: left;
height:60px;
color: #ffffff;
width:11px;

}

.pingleft
{

float: left;
height:60px;
border: 0px solid #ffffff;

}

ul#navlist
{
margin-left: 0;
padding-left: 0;
white-space: nowrap;

}

#navlist li
{

display: inline;
list-style-type: none;
}

#navlist a { padding: 10px 18px 10px 18px;
text-align:right;
}

#navlist a:link, #navlist a:visited
{
color: #fff;
background-color: #006699;
text-decoration: none;
font-family:Trebuchet,Tahoma,Verdana,Sans-serif;
font-weight:bold;
font-size:12px;
}

#navlist a:hover
{
color: #fff;
background-color: #005680;
text-decoration: none;
}

#navvcontainer { width: 25px;
}

#navvcontainer ul
{
margin-left: 0;
padding-left: 0;
list-style-type: none;
font-family: Arial, Helvetica, sans-serif;

}

#navvcontainer a
{
display: block;
padding: 4px;
width: 15px;

border: 1px solid #0084c4;
}

#navvcontainer a:link, #navlist a:visited
{
color: #EEE;
text-decoration: none;
text-align:center;

}

#navvcontainer a:hover
{
background-color: #005680;
color: #fff;
}

[edited by: JohnPorier at 1:20 pm (utc) on Aug. 24, 2007]

[4css]

Try giving your floats a width.

just an example:
.pingit

{

float:left;
width: 600px;
margin-right:20px;
border: 0px solid #ffffff;
color: #ffffff;

}