Feature
Post
Category
Code
Published Wednesday June 25, 2008 at 1:00 pm
By Thord Daniel Hedengren with 21 comments
CSS: Fun With Floating in the Grid
Sometimes for bigger design projects that will need to be pretty flexible, I tend to use several CSS classes to make it easy to maintain from a design and layout perspective in the long run. If you’re a fan of grid-like design, this is most certainly things for you to consider.
Flexible Floating
To make it easier to position elements in a design, from actual content areas (like columns and sidebars), to images and boxes, I employ a set of CSS classes that can be mixed together easily enough.
The core of these classes are:
.left { float:left; }
.right { float:right; }
.frame { border: 1px solid #aaa; padding: 5px; }
This means that any element I’ve given the left class will float to the left. If I add the frame class, it will get a grey 1 pixel border, with some padding between the content and the actual border, to make it look better.
Now, to make sure that images get the necessary spacing to the left or right when being floated, I also add these additional classes:
img.left { margin: 0 15px 15px 0; }
img.right { margin: 0 0 15px 15px; }
This will make sure that images floated to the left will get a 15 pixel spacing to the wrapping text to the right, and below. The same goes for images floated right, but to the left and below of course.
So how would this work?
<img src="myimage.jpg" alt="My image" class="right" />
This image will float right, with a suitable spacing to the wrapping text. Well, let’s add a border to it to make it look better:
<img src="myimage.jpg" alt="My image" class="right frame" />
I just add frame to the class attribute to make this happen, not hard at all. In fact, I have in the explanatory image to the right just here.
The really nifty thing, however, is that I can use the classes left and right anywhere, which can be convenient.
If you’re a WordPress theme developer then you might want to add the classes alignright and alignleft to your CSS declarations. These are the default classes used by WordPress’ image uploader/inserter, so it might be a good idea to support them.
Practical Layout Uses
Nothing fancy so far, right? Well, as I said, by doing it this way, I can easily arrange my layout as well. Let’s say I have this 970 pixel wide design, following the grid with three columns of 310 pixels each. You might recognize the concept, it’s the new Devlounge design. What I do is that I define the column, like this:
.column { width: 310px; }
No float or anything. I can also add a wide column, spanning over two columns (310×2=620 pixels), and add the spacing I have between each column in the design, being 20 pixels, bringing it to a total of 640 pixels.
.widecolumn { width: 640px; }
So let’s have a wide (double) column to the left, and a single column to the right. Simple:
<div class="widecolumn left">My wide column's content</div> <div class="column right">My right column's content</div>
For clarity’s sake, here’s an overview of the Devlounge layout, with the columns marked:
It can be convenient to keep the float attributes free of the actual content containers. As you remember, the classes left and right are global stuff that I can pull out whenever I want.
The whole current Devlounge design is built like this, using columns and separate classes as much as I could. I could optimize it a lot more (and I am, whenever I have time), but this suited this build.
Do you use this technique, and if not, why not? Share your thoughts in the comments!
Today’s categories doesn’t really work well with how Devlounge have evolved. I’m sure the plan behind the current layout is both cunning and brilliant, but things change over time, no matter how well you plan them. A good and logical categorization of content for such an editorial site as Devlounge is crucial. I repeat: it’s crucial!
This is where you come in, dear reader! I’m asking you, which forum should I choose: 
