Postanowiłem użyć (właściwie, to dopiero zaczynam ) do budowania layoutu pseudoklas :before i :after.

No i załóżmy taką podstawową strukturę:

[HTML] pobierz, plaintext 
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
[HTML] pobierz, plaintext 

content ma coś w rodzaju zaokrąglonych rogów (stałej szerokości). W związku z tym wyprodukowałem obrazek, który zawiera te detale.

CSS wygląda w - mniej więcej - ten sposób:

[CSS] pobierz, plaintext 
#content
    { clear: both; background: url('../gfx/content.png'); overflow: hidden; /*height: 400px; - to tylko dla testów bez zawartości*/ }
 
#content:before
    { content: " "; display: block; height: 26px; background: url('../gfx/contentWrapper.png') no-repeat; }
 
#content:after
    { content: " "; display: block; height: 35px; background: url('../gfx/contentWrapper.png') no-repeat bottom; }
[CSS] pobierz, plaintext 

No i dla pseudoklasy :before rogi są wyświetlone tak, jak być powinny - nie ma zastrzeżeń. Jednak :after jest wyświetlany zaraz po :before, a nie za #content, w taki sposób, że wygląda to tak:



Co ciekawe, gdy zamiast selektora #content:after użyję #footer:before, to wszystko jest jak trzeba.

Niech mnie ktoś oświeci, co ja robię źle, bo już kombinowałem clearami/floatami/displayem/etc i nie mam do tej pory pomysłu...

EDIT: udało mi się dojść, co było nie tak.

Elementy :before/:after są przed/za dla zawartości wewnątrz warstwy. Stąd już ostatnia prosta:

[CSS] pobierz, plaintext 
#content
    { /**/ position: relative }
 
#content:after
    { /*...*/ position: absolute; bottom: 0; left: 0; }
[CSS] pobierz, plaintext