Floats Vs. Positoning

Before I begin, I would like to make a point. Neither floats nor positioning are perfect. They are, for all intents and purposes a stopgap between how we do layouts now to a defacto or standardised method in the future. Indeed, there are a few layout modals in the works, but when they’re fully implemented is years away.

In the meantime, I’ll explain the differences between floating an element and positioning an element. Oftentimes, they end up with very similar looking results (though not always).

Floats: can be used to create navigation, columns or text wraps (around an image). They’re usually straightforward (though bugs persist, particularly in IE6)  in that you float the element. This means that an element floated left is on the left-hand side of the page and an element float right is in the right.

Floating Left and Right

Floating Left and Right

From here you can create columns. With floating elements they ‘float’ in relation to another element in the ‘flow’ of the document. For example, if you had two columns that are both floated left and zoomed in far enough the second column would display under the first. This means it’s intuitive enough to change at certain lengths. This is also how wrapping text around images is achieved.

Positioning: is quite similar and often works in tangent to floating elements. For example, to get navigation system to be horizontal you would float: left; and display: inline;.

This would display them in a line as well as adapting to the flow of the document. However, positioning alone isn’t the same. If you had columns positioned then they are likely to stay where they are regardless of how much or little you are zoomed in.

Absolute Positioning

Now the flow of the document can be retained to a degree by relative positioning, which changes with the flow. But absolute positioning is, well, absolute! Things will stay the same with the latter regardless of text sizing etc. This would, for example, be bad in developing for mobile devices as it would require a different stylesheet or media query per device! Imagine how much that would take/slow down HTTP requests (loading).

So a very, very basic introduction to both floating elements and positioned elements. You can read more about them on the Web but I thought it might help you get an idea of how they work. See Chris Coyer’s article explaining ‘All About Floats‘ or his video screencast.


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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s