Containers and their children

Foreground and background for floats

Since many of the elements that are floated are transparent by default, it behoves the author to check to see if it needs to have a background specified. It is often not convenient to have the floated element transparent when it overflows the parent onto what might be unexpected or confusing territory.

One of the reasons for the float technology is to push off images to the side and guarantee to have text flow around it in a simple way. Where there is a guarantee that the parent will provide the height needed to house the float, there is rarely a problem in relying on the default:

Picture caption

And some text to flow around the right side of the floated image and down under it. Here it seems quite immaterial whether the float has the background of the parent or is just transparent. Being transparent seems fine because the parent background shines through anyway. It is a typical look.

Fig 1. <div><div style="float: left;"><img src="float.jpg" alt=""><br>Picture caption</div> And some text to flow around...</div>

But where there are possibly other elements that the float in a different family can intrude upon, it is not always without severe disadvantage:

A long spiel about the picture above will be likely partly obscured now. A long spiel about the picture above will be likely partly obscured now. A long spiel about the picture above will be likely partly obscured now. A long spiel about the picture above will be likely partly obscured now.

And some inline text in this parent ...

This is just a paragraph that happens to be innocently using a dark background and white text for reasons of its own...

Fig 2. <div style="width: 350px;" class="containerSpecial"> <div style="float: left; padding: 0 10px 0 0; font-size: .9em; width: 150px; "><img src="pics/floatLandscape.jpg" height="200" width="150" alt=""><br>A long spiel about the picture above will be likely partly obscured now. A long spiel about the etc...</div>And some inline text in this parent...</div><p style="color: white; background: dark-grey; height: 300px;">This is just a paragraph that happens to be innocently using a dark background and white text for reasons of its own...</p>

Here a less obvious example where the transparent default can be advantageously used to achieve some effect (someone might think of a more important and meaningful use along these lines rather than the playful):

This is the text in a floated block which has a grey background and spans a few unfloated block boxes within a grey backgrounded wrapper parent. The background to this text is transparent and the striped effect is due to the low-down trick of having a series of unfloated block boxes, every other one of which is white backgrounded. If the float were to inherit the background of the wrapper or if the author specified a background then you would be restricted to one background colour and would have to do this alternate background for each line in a rather different way. The point of this playful example is to alert the reader to the possibilities inherent in the relations between floats and inline objects. it is not all like the elementary examples in previous pages where the children of different types line up like good little soldiers or whatever. Sometimes there is a certain beautiful complexity involved which might be tapped.

Fig 2. Roughly as described in figure above. You can always look at the page source!

Let us end these reflections about background and foreground by noting a more likely (and more serious) case where the author should surely not stick to the defaults:

Some comments about the picture perhaps or something that might be appropriate enough here.

This is the text in a pink backgrounded paragraph within a wrapper parent. The float on left floats over the paragraph and spills out of the parent.

Fig 3. <div class="containerSpecial"> <p style="float: left; margin: 5px; padding: 5px; width: 150px; border: 1px solid; "><img src="pics/crimson.png" alt="" width="100" height="175"><br>Some comments about the picture perhaps or something that might be appropriate enough here.</p><p style="color: black; background: #fcc;">This is the text in a floated block which has been width dimensioned to 15em and spans a few unfloated block boxes within a grey backgrounded wrapper parent.</p> </div>

It is unlikely to be what the author would intend. Better here for an independent and suitable colour to be chosen to background the float. Backgrounds are important when using floats in any but the simplest of situations.

Next, I will discuss the use of containers and floats in making page columns.

table of contents | previous page | next page