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:
[html]
.left { float:left; }
.right { float:right; }
.frame { border: 1px solid #aaa; padding: 5px; }
[/html]
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:
[html]
img.left { margin: 0 15px 15px 0; }
img.right { margin: 0 0 15px 15px; }
[/html]
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?
[html]
[/html]
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:
[html]
[/html]
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:
[html]
.column { width: 310px; }
[/html]
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.
[html]
.widecolumn { width: 640px; }
[/html]
So let’s have a wide (double) column to the left, and a single column to the right. Simple:
[html]
[/html]
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!
