Problem mit div bereichen

hi leute ich habe folgendes problem:

ich hab 3 divs
einen wrapper der nav und content enthält

nav soll neben content links dargestellt werden und sich bis zum ende des wrappers ziehen, ich hoffe ihr seht den fehler in meinem quelltext:

html:

[code]

css:

[code]@charset “utf-8”;
/* CSS Document */

html {
width:1024px;
margin:0 auto;
}
body {
text-align:center; /center hack/
font-size: 100.01%;
}

• {
  margin:0;
  padding:0;
  font-family: Verdana, Sans-serif;
  font-size:12px;
  }

#wrapper{
margin-top:10px;
border:1px solid orange;
position:relative;
height:100%;
width:1024px;
}

#nav{
position:relative;
text-align:left;
float:left;
width:200px;
border:1px solid blue;
height:100%;
}

#nav li{
list-style:none;
}

#nav a{
text-decoration:none;
}

#content{
border:1px solid green;
text-align:left;
font-size:14px;
position:relative;
width:100%;
height:100%;
}

.left_td{
font-weight:bold;
width:250px;
height: 20px;
}[/code]

hast du mal pics oder nen link, wie es zur Zeit aussieht, und wie es aussehen soll?
Dann lässt sich das leichter erkennen

Ist doch eigentlich ziemlich klar, woran das liegt.
#wrapper hat eine Angabe height: 100%
Das sind dann bei dem Quelltext 100% von body.
body selbst hat aber keine Höhenangabe, weswegen die Höhe
automatisch durch den Inhalt bestimmt wird, folglich haben
Prozentangaben für die Kindelemente keine Bedeutung.

Ändern kann man das etwa durch absolute Positionierung

#wrapper
{
position: absolute;
top:0;
bottom:0;
left:0;
right:0;
overflow: auto;
}

Fixierte Positionierung ginge auch, ebenfalls wenn man den
Elementen body und html eine Höhe von 100% verpaßt.
Mängel und Probleme bei alten browsern sind da garantiert, das
mit der absoluten Positionierung im Zweifelsfalle von
#nav und #content funktioniert vermutlich am besten.

#nav
{
position: absolute;
top:0;
bottom:0;
left:0;
width: 12em;
overflow: auto;
}

#content
{
position: absolute;
top:0;
bottom:0;
left:12em;
right:0;
overflow: auto;
}

Alternativ kann man den Kram für #content auch weglassen
und dem stattdessen ein margin-left von 12em geben.

Bei der Liste ist übrigens die Verschachtelung falsch, in ul
steht immer direkt li, das a gehört also in das li und nicht
umgekehrt.

mein problem besteht jetzt noch darin, dass der wrap container sich in der höhe nicht um den nav und content container legt

sprich ich will es so haben

rotist der wrapper, lila die nav, blau der content

geile farbwahl gell

aber der wrapper vergrößert sich net mit
hier mal der quelltext:

html[code]

css

[code]@charset „utf-8“;
/* CSS Document */

html {
width:1024px;
margin:0 auto;
}

body {
text-align:center; /center hack/
font-size: 100.01%;
}

• {
  margin:0;
  padding:0;
  font-family: Verdana, Sans-serif;
  font-size:12px;
  }

#wrapper{
margin-top:10px;
border:1px solid orange;
height:100%;
}

#nav{
text-align:left;
float:left;
width:200px;
border:1px solid blue;
}

#content{
border:1px solid black;
text-align:left;
font-size:14px;
float:left;
}

#nav li{
list-style:none;
}

#nav a{
text-decoration:none;
}

.left_td{
font-weight:bold;
width:250px;
height:20px;
}

#out{
height:50px;
border:1px solid cyan;
clear:left;
width:100%;
}[/code]

Natuerlich nicht - weil du seine Kindelemente ja per float aus dem Fluss genommen hast, so dass sie seine Hoehe nicht mehr beeinflussen koennen.
(Erstaunlich, dass man das wirklich jedem Anfaenger wieder neu erklaeren muss - kann das denn nicht wenigstens ab und zu mal einer selber irgendwo nachlesen, bittebittebitte?)

Loesung des “Problems” (wie Noobs definiertes Verhalten ja so gerne nennen):

• Container selber ebenfalls floaten, oder
• nach den gefloateten ein clearendes Element einfuegen, oder
• overflow des Containers auf einen anderen Wert als visible setzen, um einen Block Formatting Context zu erzeugen

okay ich dank dir, aber wieso muss ich den wrapper auch noch floaten? denn ich hab ja den nav und content auch im wrap container drinund dieser sollte doch um die elemente herum liegen und so sich seinen kinderelementen anpassen.
und mit float bestimm ich doch nur das verhalten des sich dahinter befindenden containers.

[quote=“comjag”]denn ich hab ja den nav und content auch im wrap container drinund dieser sollte doch um die elemente herum liegen und so sich seinen kinderelementen anpassen.
und mit float bestimm ich doch nur das verhalten des sich dahinter befindenden containers.[/quote]
Nein. Ich schrieb es doch gerade schon:

Das ist so, per Definition.

Floating ist echt eins der schwersten Kapitel in CSS. wenn du das gecheckt hast, bist du echt gut.
Also mach dir nichts vor, comjag. Du bist nicht der einzige, der falsch denkt

[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ß…!

Ok, und was ist wenn er um den bereich einen rahmen haben will? dann ist er mit padding-left: 220px; nicht so gut bedient
Dort bietet sich dann evtl. absolute Positionierung an, oder?

Dann nimmt er halt einen Aussen- statt einen Innenabstand.

(Oder sorgt dafuer, dass der content-Bereich einen eigenen block formatting context bildet.)

Viele Wege fuehren nach Rom, und es gibt nicht den einen “Koenigsweg”, der pauschal immer empfohlen werden koennte.

Die meisten gaengigen “Loesungen” haben ihre Vor- und Nachteile; da muss man abwaegen.

Mir persönlich ist der Weg mit der Positionierung lieber, meiner Meinung sollte jede Box sich auf den Bereich beschränken, wo sie hingehört, und sich nicht bei anderen „einmischen“.
Auch der Übersichtlichkeit halber.

Jetzt würde mich von den Pros hier nochmal interessieren: Ist der Denkansatz ok, oder gibt es was dagegen einzuwenden?

Das sollte eigentlich ziemlich gleichgültig sein…

In der Praxis habe ich eher schlechte Erfahrungen mit absoluter Positionierung gemacht (insbes. im IE6…).
Daher ziehe ich selber gefloatete Layouts vor - auch wegen der Skalierbarkeit ist das imo günstiger. Die Seitenbreite ist zwangsläufig bei absoluter Positionierung starrer.

Andererseits gibt / gab es bereits Fälle, in denen mir auch nichts anderes übrigblieb… aus SEO-Gründen sollte auf einer bestimmten Seite die Navi hinter den Inhaltsbereich (im Quelltext), aber im Layout “links gefloatet” erscheinen.
Da konnte ich mir auch nicht mehr anders helfen

Fazit: ob gefloatet oder position:absolute ist mehr oder weniger abhängig von

• eigenen Fähigkeiten
• gegebenen Rahmenbedingungen
• persönlicher Geschmack