CSS: Floats

by Nick Andrea of ExpansiveWebDesign.com

In terms of webpage layout using CSS, floats are the best thing since sliced bread. They enable you to position elements without using the archaic table-based boxy layouts of old. (Yuck! That’s so last century, dude.). It means less code, more flexibility, and it’s fun!

So how does a float work? Floating the element takes it out of the normal flow of the HTML. That means it removes it from the space it would normally occupy in the top-down layout of HTML elements. This means that the element following the floated element doesn’t know it’s there, moving up to occupy its space. In the process, however, the non-floated element does wrap around the floated element. Hence, if you have an image that goes with an article, for example, and you float it to the left or right it gives a nice wrap-around look, like you might see in a magazine article. Be forewarned, however, that you need to put the floated element before the wrapping element in your HTML. Otherwise, it will not appear as you expected.

So, how do we float? First, you add the float property in the stylesheet, like so:

.element {

float: left;

}

OR

.element {

float: right;

}

What the difference between float: left and float: right? You guessed it! Float: left floats the element to the left of elements that come after it and float: right floats them to the right of elements that come after it.

But alas! Floats can be used for more than just images. In fact, they are very handy for layout. Imagine you have a 3-column webpage with a left sidebar for navigation, a right sidebar for a newsletter signup and ads, and a main content area in between. As a shrewd web designer, you know that it’s best to put main content first in your code for SEO purposes, so you do just that. But wait, aren’t we supposed to put the floated elements – the left and right sidebars, first? Aha! You learn quickly, young Jedi. Well, we’ll use a combination of floats and margins (positive and negative) to get everything to line up correctly.

First, set widths on all three elements (you should do that with all floated elements, except images which have an implicit width), then set the main content and the left sidebar to float: left;. Set the right sidebar to float: right;. Set a left margin on the main content which is as wide as the left sidebar (you may want to add a little more just to give some breathing room). This pushes it to the right, making room for the left sidebar, which you will then set a negative left margin on. Set this negative margin as the sum of the main content plus the main content’s left margin. This will pull the left sidebar to the left of the main content area. The right sidebar will fall neatly into place with the float:right declaration. Just make sure the total width of all the elements, plus any additional margin space you added between them, is not wider than their container, otherwise you will break it.

The last thing is that if you have anything below the floated columns, like a copyright section for example, you’re going to need to clear it. You do this by adding clear: both; to that element. What this does is tells the browser to bring that element back into the normal flow underneath the last right and left floated elements. You can also do clear: left; or clear: right;. They accomplish the same thing, but if you have both left and right floated elements above you will need to clear both of them. Make sense?

These are just some ideas. To tell you everything you could do with floats I’d have to write a much, much longer treatise and extract money from your bank account for the right to read it. So, here’s another great resource on how floats work: http://www.alistapart.com/articles/css-floats-101/. And another: http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/.

The smashing magazine article says, “The concept of floats is probably one of the most unintuitive concepts in CSS.” I disagree. I think it’s totally intuitive. You just have to understand what “floating” means to a web browser. I recommend applying floats to layout, images, navigation menus, ads, banners, and other visual elements. It’s fun!

However, there are some things you need to be aware of. First, IE 6 has a plethora of issues with floated elements (Do you still use IE 6? Please say no.), including adding additional space between a floated and non-floated columns, doubling the margins applied to them, and randomly chopping of parts of the element. Here’s a good resource to help you deal with those people still living in the caveman days of web browsers: http://www.positioniseverything.net/explorer/floatIndent.html.

Second, there are some other float issues not associated exclusively with IE 6 and before (No way!). Way. One is the need to clear elements that come after the floated elements, which I described above. Another is getting the heights of different floated columns to match up. If you have different background colors set for the left sidebar, main content area, and right sidebar, you’ll find that those background colors will cut off with the end of the floated element, making your site look amateurish. There are a couple of neat ways to deal with this, including the faux column trick, which is very cool but I find labor intensive, or setting a background color on the container div that holds the floated elements, and a different background color on the taller column. The container background color becomes that of the shorter column. This works very well if you’re only dealing with two background colors, but may be more tricky if you have more than two. For more than two, I would use the faux column trick.

Speaking of container elements, this brings me to the last issue I’d like to mention. Floated elements that are taller than their containers will stick out of the bottom. Why? It’s weird, but remember, other elements don’t know they’re there, even their containers. Floated elements are like ghosts, see.

There are some simple ways to deal with this, however. The first is to add a clearing element at the bottom of the containing div, which forces the container to expand. This adds extra HTML, though, which is less sexy than the other techniques, such as floating the container element. Another way is to apply a float to the container element. Floated elements expand to contain other floated elements inside them. Ghosts understand other ghosts, and expand to accommodate them. The third technique is to apply overflow: hidden; to the containing block. This forces it to expand to contain the floated elements, without having to ad any extra HTML. However, this property can get funky if you have any absolutely positioned elements in your containing block, like drop-down menus.

The last and most recommended fix is to use the clear method developed by Tony Aslett of CssCreator.com and the people at PositionIsEverything.com. It is:

.clear:after {

content: “.”;

display: block;

height: 0;

font-size: 0;

clear: both;

visibility: hidden;

}

.clear {

zoom:1;

}
You add the “clear” class name to the container div (CSS the missing manual, McFarland 2009, p. 326). The zoom: 1; property is for IE 6. Yeah, it doesn’t make any sense, I know.

Any questions? So I hope this article has helped you understand floats better, as well as given you some ideas, and hopefully convinced you to upgrade your browser! Thank you!

Advertisements

About NickAndrea19

My goal has always been and continues to be the liberation of minds, my own and what influence I may have on others, to perceive the extraordinary beauty all around us. To this end, I write, play music, and design websites. Don't hesitate to contact me for more information about any of these activities. :)
This entry was posted in Tech and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s