
This is a legacy document, and retained on the site in order to avoid link rot. The content is likely no longer (a) accurate, (b) representative of the views and philosophies of current site management, or (c) up to date.
CSS Layout experiment 3d
Three nested CSS layers, one floating
The style rules for DIV
layers and contained text
can be found through this link to the layer
experimental style sheet .
The BODY
of this page has all of its margins set at
zero, and its left and right paddings set at 40px
.
The so resulting 100% BODY
width available for
rendering, now corresponds to the length of the horizontal ruler
sitting just above the layer example.
A snapshot of a correct rendering of this example is available.
First P
inside transparent floating
DIV
.
Second P
inside transparent floating
DIV
, and this P
is also set to be
presented with justified text.
Third P
inside transparent floating
DIV
.
A centered P
on a light blue background.
A centered P
on a green background.
Inside the pink layer, directly after this P
,
there is one more element marked up like this…<DIV CLASS="z"></DIV>
The key property value in that "z" class is…{ clear: both; }
…and it's used to suggest a vertical expansion of the pink
layer, and thus also the grey layer, so that they fully enclose
the the previous floating element.
-