CSS-tricks: centrerad elastisk och fixerad design

Inledning
Jag har på senare tid funderat över designer som tar hänsyn till användarens valda textstorlek men samtidigt bibehåller proportionerna på vissa delar av layouten, exempelvis kolumner med grafiska element som, om de hade obestämd bredd, skulle kunna komma att se underliga ut. Det givna svaret är en kombination av enheterna EM och PX. Det första problem man sedan stöter på är hur en sådan design kan centreras.

Case study
En design centreras vanligtvis med en så kallat wrapper, ett element som innehåller de delar av designen som ska centreras. Såhär kan en wrapper-definition se ut i CSS:

#wrapper {
   margin: 0 auto;
   width: 50em; /* 50 enheter beroende på vald font */
}

Inget konstigt här. Men hur gör om vi vill ha två kolumner, en elastisk för text och en fixerad för exempelvis ett bildkollage?

#wrapper {
   margin: 0 auto;
   width: 50em + 200px; /* OBS! Vi kan inte addera två enhetstyper på detta vis*/

Koden ovan fungerar inte. CSS kan (tyvärr) inte addera två enhetstyper på detta vis. Så vad göra?

En möjlig lösning med negativa marginaler
Negativa marginaler låter kanske som CSS-voodoo, men är ett godkänt koncept som kan användas till mycket roligt. En negativ marginal är helt enkelt en marginal som istället för att skapa utrymme mellan element drar dem samman. Men hur hjälper detta oss? Om du tycker negativa marginaler låter underligt så är följande helt klart skumt.

padding + negative margin = profit?
Each box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined below. - W3C, CSS2: box-modellen
Ta en titt på diagrammet vid länken ovan. Som ni ser ligger elementets innehåll inlindat i flera lager: padding, border och margin om man räknar från content och ut. Det intressanta för vårt fall är att padding läggs till width innan marginaler appliceras. Vi kan använda detta utrymme för att "lägga till" bredd på vår wrapper:

#wrapper {
   margin: 0 auto;
   padding-right: 200px;
   width: 50em;
}

Nu har vi ett element som tar upp 50em + 200px i bredd, där 50em är tillgängligt för innehåll. Genom att använda negativa högermarginaler på nästade element kan vi utnyttja de extra 200 pixlarna!

#wrapper {
   ... /* som ovan */
}
#content {
   float: left;
   width: 50em;
}
#sidebar {
   float: left;
   margin-right: -200px;
   width: 200px;
}

Ett exempel
Jag är lite trött på att skriva nu och dessutom serveras det smörgåstårta på våningen under, så jag avrundar med ett enkelt exempel att titta på. Jag har testat detta i IE6 och det verkar fungera utan hacks. Undersök gärna om designen går att knäcka på något sätt!
http://www.baramartin.se/elasticfix/index.html