CSS Float Basics
Tuesday, April 6th, 2010
In CSS, the term float usually describes when an element can be pushed to the far left, or the far right, allowing other elements to wrap around it. Think of it as how you often see things listed in the dictionary. You have the description to the left, and the image of that thing you are looking up to the right.
Now let me show you how you can get the most out of CSS float.
Elements on a page are usually floated horizontally, (left or right) rather than up or down. When an element is floated, it will move as far to the left or to the right as it can. The other elements around it will then be wrapped around it – as you can see in the picture above.
CSS Float Basics
This is the CSS code you would need to make an image float to the right, when placed in front of a block of text:
img
{
float:right;
}
Floating in class or id elements!
You can also define the float tactic when working with a class or id, like so:
.picture
{
float:left
width:110px;
height:90px;
margin:5px;
}
Stop the Floating!
Elements after the floating element will flow around it. To avoid this, use the clear property:
.text_line
{
clear:both
}
Try playing around with floating images or boxes of text to the left or right on your own web site layout, and see what you can learn from doing so. The best way to learn about CSS and designing is to try it yourself. This floating technique is also often used to make menus hover to the left or right of a web page’s layout, which in turn would eliminate the need for HTML tables.
Hope this comes in handy, and stay tuned for more free CSS tutorials!
© Lunarpages Web Hosting - Also, don’t forget to follow @lunarpages on Twitter!
Original post by Mitch
