Styling examples

The Hong Kong Skyline at sunset on a day with really bad smog.This here is an example of a custom blog layout wherein (thumbnail-sized) images are floated in order to wrap text around them. The problem in this situation is showing a caption underneath the floated images. We solve this by using the underline element (which is otherwise unused, as underlining text is generally a bad idea on websites, on account of underlines being associated with links). We style the <u> element by removing the underline it gets by default, floating it, and then setting clear, which causes it to go underneath any previous floated elements (e.g. the image).

SheepWe don't know the width of the text of the caption, nor of the image, which causes some minor problems with lining up the two sizes. We constrain the width of the caption to 194px, which (when taking borders and padding into account) exactly equals the maximum width of a thumbnail image. This means that for a horizontal image, the caption looks great, while for a vertical image, it juts out a small bit; but not in a particularly annoying way. We spruce things up a little bit by giving the caption a border and centering the text of the caption inside the box created by that. This ensures that both short and long texts (taking multiple lines) look relatively good. Finally we add some white-space (via margins and padding) to give the whole some air, give the text a darker color, and give it a very stylish small-caps look.