Current course:

CSS Float

According to W3Schools.com, "The float property specifies whether or not a box (an element) should float."

This is kind of like defining a "turtle", as "an animal that closely rembles a turtle" - not very helpful.

A good example to show what they mean by "float", is this - create a document with an image, the a paragraph of text. (Feel free to grab text from Lipsum.com (which is what most web developers user for "filler text".

You'll notice, like the first image below, your image will appear, then the text will appear to it's right. But, because an image is an inline element, it only resides in one line of text - even if it's 1000px tall, it will sit on a single line of text.

Normally, we would want that text to come up alongside the image - which is why we use "float".

css float none Without using float, if you put an image, then text, you'll notice the text starts on the baseline of the image (shown left). This is because an image is an inline element, so it resides within the line, regardless of it's height.
css float left This image (shown left) demonstrates what happens when we give the image the style of "float: left;". By "floating" the image to the left, we're telling it to allow thing to slide up to the right of it.
css float right Using the same example as the previous image, we instead tell the image to "float: right;", which moves it to the right, and allows other elements to slide up to it's left.

In-class exercise #1

  1. Create a document with three empty <div>s.
  2. Give each one a height and width of 100px and a different background-color.
  3. You'll notice, because a <div> is a block-level element, each div will appear below the previous div (reminder: block-level elements force a pseudo line-break after them so that they're the only one residing on their individual line).
  4. Set the first <div> to "float:left;", and see what happens.
  5. What if you float it right?
  6. And if you float one right and one left?

In-class exercise #2

  1. Create a div (id="container") around your three empty divs from exercise #1
  2. Tell the div to be 960px wide and 600px tall (using a CSS ID selector)
  3. Center the container with margin:0px auto;
  4. Give it a background-color of #CCC;