problem with float in firefox

float firefox css

[cuce]

Hello, I am having trouble, my page displays just fine in ie, but in firefox, the #right displays underneath the left div rather than to the right of it as i would expect it to... below is my css. can anybody help?
*{
margin:0;
padding:0;}
img{
border:none;}
#container{
position:relative;
margin-left:auto;
margin-right:auto;
width:723px;
background:url(assets/images/mainbg.gif) repeat-y;
text-align:left;}
#top{
background:url(assets/images/top.gif) no-repeat;
height: 98px;
width: 723px;
text-align:right;}
#top p{
font-size:9px;
padding-right:50px;
padding-top:45px;}
#top h2{
font-size:11px;

padding-right:50px;
font-weight:normal;
margin-top:5px;}
#top a{
color: #336699;
text-decoration: none;}
#top a:hover{
color: #003366;
text-decoration: none;}
#header{
background:url(assets/images/header.jpg) no-repeat;
height: 168px;
width: 723px;
font-size:10px;}
#nav
{background:url(assets/images/navbg.gif) no-repeat center;
height:41px;
width:723px;
text-align:center;}
#nav ul
{padding-top:17px;
font-family: 'Trebuchet MS', arial;font-size: 10px;
color: #ffffff;
font-weight: bold;}
#nav li
{display: inline; margin-left:1px;margin-right:1px;}
#nav a{
color:#ffffff;
text-decoration:none;
padding-bottom:8px;
padding-top:8px;
padding-left:4px;
padding-right:4px;}
#nav a:hover{
background:#6699cc;}
#order a{
color:#ffcc00;
font-style:
normal;
font-weight: bold;}
#content{}
#left{
width:170px;
float:left;
padding-left:38px;
margin-right:15px;
height:100%;}
#left p{
background:#ffffff;
border-top: solid 10px #003399;
border-left: solid 1px #003399;
border-right: solid 1px #003399;
border-bottom: solid 1px #003399;
padding:10px;
margin-left:10px;}
#left h2{
margin-left:10px;}
#right{
width:420px;
padding-top:10px;}
#right p{
color:#666666;
margin-top:10px;
margin-bottom:10px;}
#right h2{
font-size:19px;
color:#003399;}
#footer{
clear:left;
background:#ffffff url(assets/images/footer.gif) no-repeat top;
padding-top:10px;
padding-left:55px;
font-size:10px;
color:#666666;}

[cromano]

Hi, i think you are mising the float:right in your #right declaration.

When you use a float, the next element will appear beside that elemnt, only if itīs not a position element. But whith a div you got diferents behaviors from IE and Firefox. IE will put the div beside the float while firefox put it below.