Dense: "float"-Layout

Beitrag lesen

Servus Forumers,

bei der Erstellung eines neuen Layouts mit Hilfe von float stoße ich gerade auf Verständnisprobleme.

Layouteigenschaften:

-----------------------------------------------------------
Head
-----------------------------------------------------------
Navi
-----------------------------------------------------------
/Content                           . Info I               /
/                                  .                      /
/                                  .                      /
/                                  .                      /
/                                  -----------------------/
/                                  . Info II   .Info III  /
/                                  .           .          /
/                                  .           .          /
/                                  .           .          /
/----------------------------------.           .          /
/Content Zusatz                    .           .          /
/                                  .           .          /
-----------------------------------------------------------
Footer
-----------------------------------------------------------

So....das ist der Grundgedanke.

Head, Navi und Footer {width:100%}

Seit gestern schraube ich nun am mittleren Teil (nennen wir ihn /Inhalt/)...doch eine wirklich zufriedenstellende Lösung hab ich noch nicht gefunden.

Zentriert wird der /Inhalt/ mittels #wrapper mit fester Breite und auto margin{ 0 auto}.

#wrapper {
margin:0 auto;
width:850px;
}

#content{
float: left;
width: 450px;
}

#Info I{
width: 400px;
float:right;
}

#Info II{
float:right;
margin-top: 0px;
width: 200px;
}

#Info III{
float:right;
width: 200px;
}

#Contentzusatz{...
}

Struktur:

<div id=wrapper>
 <div id=content>
   <div id=Contentzusatz>
 </div>
 <div id=Info I></div>
 <div id=Info II></div>
 <div id=Info III></div>
</div>

Optisch  haut das Layout hin.

Aber:
Beim minimieren des Browserfensters schlagen die Float-Elemente unter den Content - irgendwo klar sie versuchen zu umfließen. Kann man das verhindern?

Ist es sinnvoller Info I, II, III nochmals in einen div ( float: right width: 350px) zu verschachteln?

Freu mich auf eure Ideen...