Problemer med div i Firefox

Hej,

Jeg har lavet en default som ser nogenlunde sådan ud:
  <div id="main">
  <div>
    <div id="left">
    <div id="img">&nbsp;</div>
    <div id="function">&nbsp;</div>
    </div>
    <div id="right">
    <div id="logo">&nbsp;</div>
    <div id="menu">&nbsp;</div>
    <div id="content">BLA<br /></div>
    </div>
  </div>
  <div id="bottom">bla</div>
  </div>

Og dertil hørende et stylesheet

body {
    font-family:Verdana,Tahoma,Arial,Sans-serif;
    font-size:10px;
    background-image:url('/henrik/_gfx/bg.gif');
}

#main {
    width:721px;
    margin:0 auto;
}

#left {
    float:left;
    width:358px;
    height:300px;
}

#right {
    float:right;
    width:360px;
    height:300px;
}

#img {
    width:358px;
    height:340px;
    background-image:url(/henrik/_gfx/bg_front.jpg);
    margin-bottom:3px;
}

#function {
    width:358px;
    height:228px;
    background-image:url(/henrik/_gfx/bg_function.jpg);
    margin-bottom:3px;
}

#logo {
    width:360px;
    height:89px;
    background-image:url(/henrik/_gfx/bg_logo.jpg);
    margin-bottom:3px;
}

#menu {
    width:360px;
    height:20px;
    background-color:#ffffff;
    margin-bottom:3px;
}

#content {
    width:360px;
    height:456px;
    background-color:#ffffff;
    margin-bottom:3px;
}

#bottom {
    width:721px;
    height:20px;
    background-color:red;
    margin-bottom:3px;
}




Mit problem er at min "bottom"-div bliver indlæst i toppen af siden, bag ved de andre div's i firefox.

Nogle der ved hvordan det rettes ?