Often in the content of your website you will want an image beside your text, allowing the text to wrap around. Or perhaps you may want to add a second or third column to your website. This is the job for the CSS float property.
The float property tells whatever element you apply it on to float to a specific side (left or right). Whatever content is left after the specified element will then wrap around. So in my HTML code if I have paragraph tags above my image, paragraph tags below my image, and then tell the image to float left, only the paragraphs below the image will be affected and flow around the image.
When you are working on a website that is often floating pictures left and right, it is smart to make a class that you can apply to each image. This way you have full control over the amount of margin and padding each image uses as well. Take a look at the following class:
.lpic{
float:left;
margin:0px 15px 15px 0px;
padding:0px;
}
You can see that I am floating the element to the left, and then applying 15 pixels of margin to the right and bottom side of the element. This way, the content that flows around the element will not be too close to it. To apply this to an image all you need to do is add the class “lpic”
We can also make one for floating an element to the right, using essentially the same idea but moving the 15px margin to the left:
.rpic{
float:right;
margin:0px 0px 15px 15px;
padding:0px;
}
Clearing Floats
A float will continue until the elements floating run out of space or until you “clear” the float. To do this you just need an element to use the clear property. The clear property can have the values of left, right, or both to clear a left float, right float, or both.
What I have seen as the best way to clear your floated elements is to create a class that will be your “div clearer”. What we can do is apply a class of “clearline” to an empty div. The styles for this class will look like the following:
.clearline{
clear: both;
display: block;
margin: 0px;
padding: 0px;
height: 0px;
font-size: 0px;
line-height: 0px;
}
There are a few things we do here. First we set the clear to both, this makes sure that the clear is no longer applied. We then tell the div to be displayed as a block. Even though by default, the div is a block level element, this is just to make sure. We set the margin and padding to 0, then we set the height, line-height, and font-size to zero. This lets us be sure that the div will do exactly what we want, but not take up any space.
One more important thing to note, in some browsers when just writing out <div class=”clearline”></div>, the browser may not interpret it correctly since it is empty, so just adding a space character in there will do the trick:
<div class=”clearline”> </div>
Some tips / bug fixes
-When making multiple columns, you will need to assign a width and float to each column. For example:
//CSS
<style>
.columnleft{
width:200px;
float:left;
}
.columnleft{
width:500px;
float:left;
}
</style>
//HTML
<div class='columnleft'>left column</div>
<div class='columnright'>right column</div>
-Try to use your .clearline class as soon as your floats are done. The longer your floats continue when they shouldn’t the more issues you may run into. So be sure to clear them once they are no longer needed. So for example if you had a navigation div and each of your menu items was an unordered list, where each <li> floated left, you would probably want a setup close to this:
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<div class=”clearline”> </div>
