Working with the CSS Float Property

The CSS Float property allows you to position an element to the left or right side of a container. Additionally, because it interrupts the “flow” of the normal web layout, it not allows for the element to have other elements wrap around it, such as you would expect to see with an image in a magazine, or a side bar even.

Floats allow for a lot of the CSS layout to take place, and many CSS Frameworks use floats to assist with their positioning. Some interesting CSS Frameworks you might want to review are:

• Bluepint CSS
• YUI Grids – Even has a builder to graphically layout your pages
• 960
• YAML – They even have a YAML Builder to graphically design your CSS Pages

Files for this weeks class

Basics of Floating an Element

Elements can be floated by setting the CSS property float. The float property is either left, right, or none. By default it is none.

.floatLeft {
   float: left
}

This will cause other elements to wrap around the floating element. If you want to clear the float, use the clear property. You can clear only left floats, only right floats, or both floats.

.clear {
   clear: left;
}

Floating an Image

The most common element to float (at least when beginning) is an image.

Example 1 Image Float – Notice how the text wraps around the images, and each image is pushed to the far side.

Sample file for in class exercise

Example 2 Border for Image with Caption – Let’s not but a border around the image, and define a caption.

Sample file for in class exercise

Floating Text Elements

By using floats with either divs, or even paragraphs, we can work within a grid or column based layout structure with a little planning. Look at the 960 CSS Framework to see this in action.

We can replicate this behavior in many ways to come up with simpler methods, such as a two column layout.

Example 3 Text Float – here we simulate a simple CSS Pull-quote, and have two columns, which need to float, and allow for other elements to clear the floats.

Sample file for in class exercise

Floating for Menus

Floats help us define menu structures as well, so place each element one next to the other. We’ll look at the same structural layout to generate two separate menu layouts.

Example 4 CSS Menu layout Horizontal

Example 5 CSS Menu Layout Vertical

Sample file for in class exercise – notice that there are spans inside of the anchor tags…very important.

Wrapping text around an image in CSS

Bonus stuff!!!

Step 1 – Step 2 – Step 3

Working with the CSS Float Property was originally found on Access 2 Learn