[quote=“comjag”]…und mit float bestimm ich doch nur das verhalten des sich dahinter befindenden containers.[/quote]NEIN.
Typischer Fehler, der mir anfangs auch immer passiert ist )
Mit CSS formatierst Du immer nur das selektierte Element - niemals folgende oder vorhergehende! Wenn Du also mit " #nav" die Navigation selektiert hast, kannsst Du auch nur dieser die Eigenschaften geben - auf das (im Quelltext folgende) " #content " hat nichts davon irgendeinen Einfluss.
Ok, zu Deinem Layout - lösen lässt sich das grundsätzlich auch ohne “Verrenkungen” und mit einem einzigen float.
Fangen wir also gemeinsam mal bei Null an und erstellen ein (neues) CSS…
Der Reihe nach: so wie ich es verstehe, willst Du einen Container “#wrapper” haben, zentriert auf der Seite und 1024px breit.
Zusammen mit den grundsätzlichen Angaben haben wir also folgende Zeilen:[code] /* alle Abstände auf 0 setzen */
html * {margin:0; padding:0;}
body {text-align:center;}
#wrapper {
width: 1024px;
margin: 10px auto 0 auto;
text-align: left; /* kann schon hier gesetzt werden und wird vererbt */
}[/code]Btw: eine Breite von 1024px ist eher ungünstig… damit erzwingst Du horizontale Scrollbalken, wenn ich diese Monitorauflösung tatsächlich nutze (und das ist afaik immer noch die mehrheit).
Browserfenster haben einen Rahmen - damit gehen ein paar px weg. Und die vertikale Scrollbar braucht auch Platz. Eventuell noch Sidebars der Browser…
Eine Breite von 900 … 960px hat sich bewährt.
Weiter im Text - die Navi.
Links gefloatet, 200px breit:
#nav {
float:left;
width:200px;
}
Bei evtl. padding darauf achten, dass die Navi sich damit verbreitert (-> Boxmodell)!
Um nun noch den Inhalt reinzubekommen, brauchst Du nichts weiter tun… der fliesst bereits jetzt um die Navi herum.
Einzig der “Schönheitsfehler” bleibt: unter der Navi geht der Inhalt bis an den linken Rand des wrappers.
Um das zu verhindern, setzt Du ein padding ein und gibst dem Inhalt so einen Abstand nach links:
#content {padding-left:220px;}
220px kommen so zustande:
Die navi ist 200px breit, + 20px Abstand zum Rand der Navi = 220px.
Das war im Prinzip schon alles… Du hast jetzt ein zweispaltiges Layout, das nicht “zerrissen” aussieht.
Natürlich musst Du noch “aufhübschen”, Farben, Schriften, Listen usw. formatieren… das hat aber nix mehr mit der Aufteilung der Seite zu tun.
Viel Spaß…!