CSS Floating Text

Floating boxes in CSS have been extensively used for over a decade, ever since designers dropped tabled design and began using only CSS to format the elements of a page. A quick example:

HTML Example:

Float left
Float right
No float

CSS Example:

p.right {float: right; background: yellow}
p.left {float: left; background: red}
p.none {float: none; background: cyan}

#box {width: 400px}

Result:

Notice how the text set to float left is placed on the left of the #box div, the one set to right is on the right hand side and the one with float: none shows inline, wherever it "can find room". A fourth value of the float property is inherit, which is pretty self-descriptive: it will inherit the float declaration of its parent.