aDevelopersNotebook

  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

• Some definitions
• Float basics
• Floats and "clear"
• Browser types

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.

• Step 1 - Start with a paragraph of text and an image
• Step 2 - Apply float: right to the image
• Step 3 - Add margin
• Step 4 - Add a border
• Step 5 - Add padding
• All steps combined

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.

• Step 1 - Start with a paragraph of text and an image
• Step 2 - Add a div around image and caption
• Step 3 - Apply "float: right" and width to the div
• Step 4 - Apply margin to the div
• Step 5 - Add a background color
• Step 6 - Add padding
• Step 7 - Add a border to the div
• Step 8 - Add a border to the image
• Step 9 - Remove margin-top on the paragraph
• Step 10 - Playing with borders
• All steps combined

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.

• Step 1 - Start with a paragraph of text and a series of images
• Step 2 - Apply float: right to the images
• Step 3 - Add margin
• Step 4 - Add "clear: right"
• Step 5 - Remove margin-top on the paragraph
• All steps combined

Tutorial 4. Floating an image thumbnail gallery

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

• Step 1 - Start with some thumbnails and captions
• Step 2 - Float the divs
• Step 3 - Add a border
• Step 4 - Add margin
• Step 5 - Forcing a new line
• Step 6 - Add padding
• All steps combined

Tutorial 5. Floating next and back buttons using lists

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

• Step 1 - Start with a paragraph of text and a list
• Step 2 - Remove bullets
• Step 3 - Remove padding and margins
• Step 4 - Float the list items
• Step 5 - Adding a line above the list
• Step 6 - Adding padding below the line
• Step 7 - Display block
• Step 8 - Moving the width
• Step 9 - Add a background color
• Step 10 - Add padding
• Step 11 - Text decoration and alignment
• Step 12 - Add a hover state
• All steps combined

Tutorial 6. Floating inline list items

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

• Step 1 - Start with a simple unordered list
• Step 2 - Remove the bullets
• Step 3 - Remove padding and margins
• Step 4 - Display inline
• Step 5 - float the "a" state
• Step 6 - Add a background color
• Step 7 - Add padding to the "a" state
• Step 8 - Removing text decoration
• Step 9 - Add a border to separate the list items
• Step 10 - Add a rollover color
• Step 11 - Float the UL
• Step 12 - Add a background color to the UL
• All steps combined

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.

• Step 1 - Start with a paragraph of text
• Step 2 - Add a span around the first letter
• Step 3 - Float the first letter
• Step 4 - Increase the font size
• Step 5 - Set a line-height
• All steps combined

Tutorial 8. Liquid two column layout

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

• Step 1 - Start with the semantically marked up code
• Step 2 - Add width and margin to the container
• Step 3 - Add color, background color and border
• Step 4 - Add line height
• Step 5 - Styling the top banner
• Step 6 - Remove margins and padding from the h1
• Step 7 - Apply "float" to the leftnav
• Step 8 - Add margin and padding to the leftnav
• Step 9 - Setting margins to the "content" div
• Step 10 - Add padding to the "content" div
• Step 11 - Styling the footer
• Step 12 - Add color and background color to the footer
• Step 13 - Add a border to the footer
• Step 14 - Removing top margins
• Step 15 - Setting a maximum line length
• All steps combined

Tutorial 9. Liquid three column layout

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

• Step 1 - Start with the semantically marked up code
• Step 2 - Add width and margin to the container
• Step 3 - Add color, background color and border
• Step 4 - Add line height
• Step 5 - Styling the top banner
• Step 6 - Remove margins and padding from the h1
• Step 7 - Apply "float", margin and padding to the leftnav
• Step 8 - Apply "float", margin and padding to the rightnav
• Step 9 - Setting margins to the "content" div
• Step 10 - Add padding to the "content" div
• Step 11 - Styling the footer
• Step 12 - Add color and background color to the footer
• Step 13 - Adding border to the footer
• Step 14 - Removing top margins
• Step 15 - Setting a maximum line length
• All steps combined