Verschachtelte Div-Blöcke: Hintergrund funktioniert nicht

[Mr Dude]

Hallo Leute, ich hab schon viel gegoogelt, aber nichts gefunden, ich hoffe ihr könnt mir helfen. Folgendes: Ich habe mein Layout grob gesagt in drei div-Container eingeteilt die in einem Großen liegen. Der Große soll nicht nur die Elemente zusammenhalten, sondern auch den Hintergrund bringen. Leider hört der Hintergrund bei mir bündig mit dem rechten der beiden Div die nebeneinader liegen auf. Das dritte liegt unten, als Footer sozusagen. Kann mir jemand meinen Fehler zeigen? Im IE funktioniert es einwandfrei, aber Opera, Firefox unc Chrome machen nicht mit. Der Code ist stark vereinfacht, führt aber zu den gleichen Problemen, nur das der Hintergrund hier rein gar nicht zu sehen ist:

div#seite {  
    width: 500px;  
    align: center;  
    text-align: center;  
    padding: 0;  
    margin: 0 auto;  
    background: url(images/back.jpg);  
  }  
div#eins {  
    width: 220px;  
    height: 200px;  
    float: left;  
    background: red;  
    margin: 0; padding: 0;  
    }  
div#zwei {  
    width: 210px;  
    height: 150px;  
    float: left;  
    margin: 0; padding: 0px;  
    background: green;  
    }  
div#drei {  
    text-align: right;  
    font-size: 1em;  
    width: 450px;  
    height: 150px;  
    float: left;  
    background: blue;  
    }

<div id="seite">  
  
     <div id="eins"></div>  
     <div id="zwei"></div>  
     <div id="drei"></div>  
  
</div>

[Onkel Schnitzel]

Hallo Dude,

das sind zu viele floats. Du möchtest ja nur, dass der zweite Block den ersten umfließt, richtig? Also bekommt auch nur der erste ein float. Für den zweiten aber ein margin-left und vor dem footer den Dokumentfluß wieder herstellen per clear:left oder indem du die ersten beiden Blöcke mit einem div und overflow: hidden umschließt, das mache ich immer lieber als clear: left.

Gruß vom Schnitzel, dem hier auch gerade geholfen wurde.

[Gunnar Bittersmann]

@@Mr Dude:

nuqneH

Hallo Leute, ich hab schon viel gegoogelt, aber nichts gefunden, ich hoffe ihr könnt mir helfen. Folgendes: Ich habe mein Layout grob gesagt in drei div-Container eingeteilt die in einem Großen liegen.

Das div für den großen Container ist überflüssig; es sind schon ausreichend Container da.

Für die anderen div lassen sich passendere HTML5-Elemente finden: Inhalte strukturieren, Seitenstruktur, main-Element.

Der Große soll […] den Hintergrund bringen […] nur das der Hintergrund hier rein gar nicht zu sehen ist:

Weil der große Container keine Höhe hat, weil nichts drin ist, was ihm Höhe geben würde. Floatende Elemente tun dies nicht. Einschließen (Clearing) von Floats

Qapla'