formatierung mit div/css schlägt fehl

[mömö]

hallöle.

ich bin gerade dabei mir ne homepage zusammemzubasteln, und zwar mit mit xhtml + css. aber ein div gehorcht dem css nicht. nervig. wenn mir da jemand mal etwas unter die tasten greifen kann:

div.content (text: hier muss noch inhalt hin) liegt innerhalb von div.seite. wird aber trotzdem außerhalb dessen rahmen positioniert.

wenn ich die menüs unter div.content schiebe sieht es richtig aus. css und xhtml ist valide. wieso kommt da so ne scheiße raus? kann mir da evtl jemand helfen?

valide nach w3c ist das ganze auch!

und nicht wundern über das hässliche layout, die seite ist noch nicht fertig und zum testen/positionieren lasse ich mir die ganzen rahmen anzeigen!

gruss
momo

[MudGuard]

Hi,

div.content (text: hier muss noch inhalt hin) liegt innerhalb von div.seite. wird aber trotzdem außerhalb dessen rahmen positioniert.

Logisch. div.seite ist 760px breit.
Links liegen die kleinen divs, die eine Außenbreite von 152px haben.

Das div.content hat mit margins und border eine Breite von 610px. 610px + 152px = 762px. Paßt also nicht neben die kleinen divs, kommt also schon von daher erst unterhalb.

Und floatende Elemente haben keinen Einfluß auf die Größe eines nicht-gefloateten Elternelements.

cu,
Andreas

[mömö]

Hallo,

Danke für deine Antwort, das war es aber nicht ganz:

Das div.content hat mit margins und border eine Breite von 610px. 610px + 152px = 762px. Paßt also nicht neben die kleinen divs, kommt also schon von daher erst unterhalb.

Nach der Logik ist div.content 2px zu groß, also habe ich es auf 586px reduziert. Geändert hat sich trotzdem nichts :/

Ich dachte auch beim ausrechnen folgendes: div.menu ist 150px breit, +2px (1px Rahmen auf jeder Seite), -2px (-1px auf jeder Seite aufgrund von margin:10px -1px).

Ich habe div.content auch mal Testweise nur 500px groß gemacht (und jetzt so gelassen), es hat sich nichts geändert...seltsame Sache!

Gruß
momo

[Ingo Turski]

Hi,

Dein div.seite (wieso eigentlich eine Klasse?) hat eine Höhe von 100% des Elternelements. Dieses aber hat lediglich die Höhe der im Textfluß befindlichen Elemente, wozu floatende Elemente wie gesagt nicht gehören. Und bevor Du nochmals nachfragst: auch das Elternelement dieses Elements hat keine andere Höhe.

Aber bedenke, daß die Vorgabe einer Höhe nur bei absolut berechenbarem Inhalt sinnvoll ist. Bei Fließtext ist die i.d.R. nicht der Fall, da Du nur sehr begrenzten Einfluß auf den Platzbedarf des Textes hast.
Statt eine Höhe zu definieren, solltest Du in Dein div.seite zuletzt noch ein clearendes Element setzen, daß den Textfluß wieder herstellt.

freundliche Grüße
Ingo