CSS: Korrekte Bemaßung und Positionierung der Elemente bei Verwendung des Holy Grails
Liebe Leser,
nach einigen Anfängerfehlern (Holy Grail nicht verstanden etc.) und dem Lesen des Buches von Peter Müller bin ich nun schon ein gewaltiges Stück weiter gekommen. Erst einmal besten Dank für Euren erstklassigen Support! ;)
Eine grundlegende Frage habe ich aber dennoch, die ich mir aus Buch und Forum bisher noch nicht ganz erklären konnte:
Peter schreibt, dass #main, #left und #right im CSS keine margins und paddings vertragen. Man sollte stattdessen lieber auf die Selektoren #main .inside, #left .inside und #right .inside zurückgreifen.
- Doch wie verhält es sich mit der Breitenangabe (width) bei diesen Selektoren? Darf ich hier die direkten Selektoren ansprechen, oder muss ich ebenfalls auf die jeweiligen Klassen .inside zurückgreifen?
Bei meinem derzeitigen Holy Grail-Layout funktioniert alles bestens. Dennoch geht mir die Anmerkung von Peter nicht aus dem Kopf. Bisher sieht meine Bemaßung und Positionierung von #left und #right so aus:
Code:
#left {
right: 100px;
width: 100px; }
#right {
width: 100px; }
#container {
padding-left: 100px;
padding-right: 100px; }
Diese Lösung wäre ja aufgrund des direkten Ansprechens der Selektoren nach Peter nicht ganz optimal. Wenn ich nun allerdings mit obigem CSS anstelle der Elternelemente die Klassen .inside ansprechen würde, dann wären die Elternelemente (#left und #right) bündig an #main, während die Klassen .inside (im Fall von #left) zwar korrekt positioniert, jedoch teilweise über das Elternelement hinaus ragen würden.
- Das wäre dann aber doch auch keine saubere Lösung mehr, weil die .inside-Klassen (teilweise) außerhalb ihrer jeweiligen Elternelemente (#left und #right) liegen würden?
Wie würdet Ihr das CSS denn gestalten?
Herzlichen Dank für Eure Hilfe!
Viele Grüße
KloBoBBerLe
