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...