Working with CSS Float
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 alot of the CSS layout to take place, and many CSS Frameworks use floats to assits 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
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 Pullquote, 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 seperate 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!!!