Backround example

This page will have a continuous gradient in the background image, but there's nothing in the HTML document itself to specify this.

A normal subheading

Depending on whether or not the default style for this page specifies a background for headings, this may be different from what follows...

A heading with an explicit background

This may appear to block out part of the background, but there's no way to be sure without also specifying the position of the heading (left, right, or center). It's better to specify a group of stylistic attributes together, so that their interactions can be controlled.

An invisible heading?

So for example you might not be able to see the heading on the line above: it would work well with the default LTRR style, but isn't appropriate in this context.

A padded paragraph

This may have a broader opaque background around it, hiding part of the backround image, although it obviously isn't suitable for all cases.

Images within text

Here's an attempt to combine a floating image within some text. The technique is described in <URL:>, but as always in such cases there may be a problem with the particular browser that prevents this working as advertised. We won't even think of attempting drop initial capitals for paragraphs here; people have reported in the news group comp.infosystems.www.authoring.stylesheets that they have had to resort to various horrors, including negative margins, to get this looking reasonable.

There are ways to do this within HTML (but of course that's what we are trying to avoid through the use of style sheets). Here's that image again, except that this time we'll follow the specifications from the HTML 4 draft, <URL:>, which might do something slightly different. This is an approach that's been widely adopted in the past, but the new HTML draft makes an explicit reference to stylesheets when it considers positioning images within the flow of text.

Some boxes

This might be a box, but the border might not get rendered properly.

Some horizontal layout via DIV
Here's some text that's just floating around, possibly with no real home. With an appropriate browser implementation, good luck, and a following wind, this section might just be rendered as the left part of a two-column layout.
And here's a section that should (in a perfect world) be the right part of a two column layout, provided it's downhill all the way and there's an R in the month.
Horizontal layout in other entities

Here's an attempt to do the same thing by customizing other entities. We've got a paragraph on the left side of the page, and an itemized list on the right, again without any trace of a table to specify these positions. The imprecise and variable positioning (as opposed to a fixed-width table) may even be beneficial in some cases.