Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts.

General info

Tutorial 1. Floating an image to the right

Float an image to the right of a block of text and apply a border to the image.

Tutorial 2. Floating an image and caption

Float an image and caption to the right of a block of text and apply borders using Descendant Selectors.

Tutorial 3. Floating a series of "clear: right" images

Float a series of images down the right side of the page, with content flowing beside them.

Tutorial 4. Floating an image thumbnail gallery

Float a series of thumbnail images and captions to achieve an image gallery.

Tutorial 5. Floating next and back buttons using lists

Float a simple list into rollover "back" and next "buttons".

Tutorial 6. Floating inline list items

Float a simple list, converting it into a horizontal navigation bar.

Tutorial 7. Floating a scaleable drop cap

Float a scaleable drop cap to the left, resize it and adjust line-heights to suit your needs.

Tutorial 8. Liquid two column layout

Float a left nav to achieve a two column layout with header and footer.

Tutorial 9. Liquid three column layout

Float left and right columns to achieve a three column layout with header and footer.

Max Design


Recent articles

Popular articles

Other Max Design articles and presentations
Associated with webstandardsgroup.org