Ik heb Zeldman's boek "Designing With Web Standards" uit, maar ik heb er 1 vraag over, die hier misschien wel beantwoord kan worden of misschien een leuke discussie op kan leveren over CSS.
In een voorbeeld voor een site beschrijft hij een layout die bestaat uit 2 kolommen. Links staat een kolom van 150 pixels breed met daarin het menu, en rechts daarvan hoort een kolom van 400 pixels breed te komen met daarin de content.
Ik heb bij de CSS-voorbeelden alles behalve de positionerings-code gestript voor de duidelijkheid.
Het menu heeft deze CSS:
[code:1:f81976f3ef]
position:absolute;
left:0;
[/code:1:f81976f3ef]
Er is gekozen voor een absolute positioning omdat float in veel browsers problemen oplevert. De rechter kolom wordt nu echter met 2 divs geplaatst. De buitenste div maakt een blok-level element van de content, en de binnenste div zorgt ervoor dat de breedte netjes op 400 pixels wordt gezet.
De code voor het buitenste blok is:
[code:1:f81976f3ef]
margin-left:150px;
width:auto;
[/code:1:f81976f3ef]
En het binnenste blok:
[code:1:f81976f3ef]
width:400px;
[/code:1:f81976f3ef]
Volgens Zeldman is dit gedaan omdat als het buitenste blok een width van 400px krijgt, er van alles fout gaat met het positioneren van dat blok in verschillende browsers. Bij sommige wordt er rechts uitgelijnd, bij andere komt het door het menu te staan, dat zijn de voorbeelden die worden gegeven.
Ik zit nu op mijn werk, dus ik kan jammer genoeg niet uitgebreid testen, maar voor zo ver ik kan zien werkt 1 div met deze code prima:
[code:1:f81976f3ef]
position:absolute;
left:150px;
[/code:1:f81976f3ef]
Waarom gaat Zeldman dan toch voor het niet-structurele 2-div systeem?
Voor mensen die het boek ook hebben: Het gaat om hoofdstuk 16, bladzijden 389 t/m 397. Voor de rest heb ik geprobeerd door de CSS voorbeelden alles zo duidelijk mogelijk uit te leggen. ;]
