Thomas: Probleme mit Divs + Background + Firefox

Beitrag lesen

Hallo Leute,

ich hab ein Problem mit folgendem Code:

<body style="margin: 0px; background-color: #234251; text-align: center;">
 <div style="width: 780px; padding: 20px 50px 0px 50px; margin: 20 auto; background: #000 url('page.gif') no-repeat;">
  <div style="padding: 40px 20px 20px 40px; width: 720px; height: 80px; background: #fff url('header.gif') no-repeat;"><h1>Title</h1></div>
  <div style="padding: 8px 20px 8px 20px; width: 740px; height: 24px; background: #fff url('menu.gif') no-repeat;">Menu</div>
  <div style="width: 770px; padding: 5px; background-color: #fff;">
   <div style="width: 550px; padding: 10px; background-color: #fff; float: left;">
    <h1>Content</h1>
    <p>...</p>
    <p>...</p>
    <p>...</p>
   </div>
   <div style="width: 160px; padding: 20px; background: #f0f0f0 url('sidebar.jpg') no-repeat; float: left;">
    <h2>Sidebar</h2>
    <ul>
     <li>Link 1</li>
     <li>Link 2</li>
     <li>Link 3</li>
    </ul>
   </div>
  </div>
  <div style="width: 740px; height: 18px; padding: 8px 20px 20px; 20px; background: #fff url('footer.gif') no-repeat; font-size: x-small;">Footer</div>
 </div>
</body>

Und zwar scheinen im Firefox verschachtelte Div-Container das übergeordnete Div nicht "aufzuspannen". Um es verständlicher zu machen, hab ich mal 2 Screenshots gemacht:

http://www.thomas-ney.com/soll.jpg zeigt den IE6, der meinen Code so interpretiert, wie ich es gern hätte.
http://www.thomas-ney.com/ist.jpg zeigt den Firefox mit genanntem Problem.

Ist sicher nur ne kleine CSS-Ergänzung, nur komm ich nicht drauf und verzwifel grad etwas. Darum danke ich euch bereits im Vorraus für eure Hilfe.

P.S.: Das ganze ist natürlich nur Entwurfs-Code, also nicht über die CSS-Befehle im HTML-Code wundern.