What I Learned at Skool – CSS Floats – “Slip Sliding Away…”

The float property in CSS is one of the most interesting layout tools and one of the most frustrating. When done right they are almost magical in what they can do.

Done poorly or without a good understanding of the coding process behind them – well let’s say some of my gray hair is due to the slip-slidey nature of floats.

So if you have ever wondered what are floats and how to use them, then you should read this post.

What are floats?

“A float is a box that is shifted to the left or right on the current line. The most interesting characteristic of a float (or “floated” or “floating” box) is that content may flow along its side (or be prohibited from doing so by the ‘clear’ property).”  W3.org

This means that once an element is set to float, the other elements on the page, like text for example will auto-magically flow around it. The float property has 3 active states: left, right and none.

A floated box will sit or float on either the extreme left or extreme right inside its parent div or container.

How are floats used in design?

Floats usually used one of two ways in website design: for allowing text to flow around images and callout boxes or to create page columns.

Text Flowing Around an Image

This is most common method of using the float properly. By allowing the surrounding text to flow around images or callout boxes (containing other text), you can easily mimic the visual layout of a printed magazine or book.

As you can see the text flows around the images and their borders. This same technique could be used for either a callout or text “sidebar” box.

Here is the css code for these image floats..

img.img_left {

float: left;
border: 2px solid;
border-top-color: #333333;
border-left-color: #333333;
border-bottom-color: #999999;
border-right-color: #999999;
padding: 5px 5px;
margin: 5px 5px;
}

img.img_right {
float: right;
border: 2px solid;
border-top-color: #333333;
border-left-color: #333333;
border-bottom-color: #999999;
border-right-color: #999999;
padding: 5px 5px;
margin: 5px 5px;
}

Floated Columns

The next most widely used function of floats is to create “columns”. It is this bit that is most frustrating and confusing for people — even ones who have some web programming experience.

A floated column unlike a standard “fixed’ width design, is more “liquid” (shrinks to fit). This means a page with floated columns can be more easily viewed by a variety of different devices with different screen sizes than ordinary desktop monitors.

And with the flood of web capable mobile devices onto the marketplace – from smartphones, to iPads, netbooks and tablets, designing websites that are somewhat more viewable by a larger range of device is becoming critical.

As you can see the three different columns float up against each other and their sides. This technique can be used for both a main content block and a single sidebar or for several columns as shown.

Now the trick to floating columns is you have to specially code BOTH the HTML and CSS. Yes, I know that ‘they’ told you would never have to touch HTML again to set appearances but ‘they’ lied.

The deal is you have to structure the HTML so that the “sidebars” (or what you want to call your left or right floats pieces) come first. For example in your HTML you MUST set up your page using something like this:

Okay, Okay… I was wrong. All you really have to do is float the very first HTML element in your CSS code. For example the code below is the HTML from your page.

<div id=”maincontent”>Main Content box = Column 2 </div>

<div id=”sidebar”>Left Sidebar = Column 1</div>

<div id=”othersidebar”>Right Sidebar = Column 2 </div>

The “maincontent” has to be floated FIRST in the CSS since it is rendered (placed) first in HTML.

Now in the CSS the trick I have found that works for me is to set the width of your sidebars Main Content box and float it either left or right. – then using the “margin-left” and “margin-right” function to “push” your main content sidebar boxes away from the sides of the wrapper div (exactly the space need for your mash in the sidebars).

Check it out this shorthand code

#content {
margin:0 160px 0 160px;
}

The margin-right is 160px with the margin-left the same since both sidebars are same width. You would change margins to match the sidebar widths.

Floats: Pros and Cons

Now here is the truth. Floats can be freaking hard to work with if you haven’t had a lot of experience working with them. And if you are under some type of deadline or time crunch they are almost impossible.

BUT you can do things with floats that are very difficult or even more time consuming to do with other programming. And a like I mentioned a floated website is more liquid and therefore more viewable in some mobile devices.

But they are very hard to create on the fly – which is why folks that I know have a handy “swipe file” of ready to rock ‘barebones” HTML and CSS templates (with floats).

They already have them setup to suit their needs and can just customize and expand to fit the needs of their clients. You can start your own “swipe file” by visiting http://blog.html.it/layoutgala/ and downloading their barebones CSS layout.