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

To Download this E-Book Click Here.