como alinhar dois quadrados um do lado do outro

eae galera to aki me matando.. com uma coisa q deve ser simples mas até agora naum consegui desvendar o misterio.... olhem o script abaixo<div style="background-color:#000000; width:700px "> <div style="background-color:#FF0000; width:199px; height:25px; float:left "> Quadro 1 </div> <div style="background-color:#FF9900; width:500px; height:300px; float:right; "> Quadro 2 </div> <br> <br></div>se vcs verem este script no navegador I.E. os dois quadros menores aparecem dentro do quadro maior (preto), agora no FireFox isso naum acontece do mesmo jeito....Qual seria a solução ou script a fazer para o firefox ver do mesmo jeito q no I.E.?Desde já agradeço www.7xstudio.com