
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 4c
Four nested CSS layers, two floating in P
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.
A centered P
on a green background.
All three paragraphs in this example are marked up inside one
DIV
with a pink background, that in its turn is
nested inside a DIV
with a light grey background
color. A left floating layer, containing an image is inserted
inline in this paragraph by the help of a SPAN
,
alt="_here_"
src/images/csspg-ao-logo-117x68.gif" and a bit further
into this text there is another image inserted by the same
method as a right floating element, alt="_here_" src/images/csspg-ao-logo-117x68.gif" to
illustrate how text flows around them both. The paragraphs
themselves have three different background colors, and this
middle P
is also set to be presented with
justified text. Rest of details can be found in the HTML source
code and the stylesheet. Ok, let's fill this paragraph with
some more text now just to make sure we can illustrate how text
flows around inline left/right floating elements. Lorem ipsum
dolor sit amet, consectetaur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat
nulla pariatur.
A centered P
on a light blue background.
-