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 4b

Three nested CSS layers, one 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 , _here_ to illustrate text flow around. 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 that we can illustrate how text flows around an inline left floating element. 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.