This article isn’t meant to hash over the pro and cons of which one is better in the age-old (at least since 2001 or so) css vs. tables debate. I really don’t care which one you use. If you can get your work done quickly, make money, and sleep well at night, then that is really all that matters. I’m not here to judge. That being said, here’s a tip: css isn’t that hard. Please stop moaning about how it’s hard to make a css layout work across all browsers and platforms, or at all, because it’s not. I spend very little time bashing my head against a wall trying to make my design work. If you do bash your head a lot, then here are a few things that I do to ensure that the code will work. You don’t need a framework, you can get by with just a few lines to start with. I’m not necessarily going to get into the how’s or why’s, just go by these few things (if you don’t already) and I guarantee it will make your life easier:

Set everything to zero

You may have seen frameworks that have a ‘reset’ style sheet in them, basically what they do is set all elements to zero, so that by default everything has no margin and no padding. The purpose of this is to override each browsers default settings, which are all different. Some of the resets I’ve seen are overly complex, but they are good. They take into account all of the cases of the different elements, and set them accordingly, but one way to get a quick start on this is to use this bit of code at the top of your css:

html * {

margin: 0;
padding: 0;

}

That sets everything that is inside the html tag to have a margin and padding to 0. You might want to go back and ‘unreset’ some elements. Maybe you want your lists to have some default margins, for example. At any rate, the point of this is so that you know what any given element is going to do by default.

Float:left + Clearfix

For layout, float everything left and make sure the elements after that clear it. Do not use float: right to layout elements, that will be a rabbit hole you will not get out of. This code, which I’m pretty sure I originally got from Position is Everything (Which, by the way is a great resource, but honestly is something I haven’t had to visit in a long time, fortunately) is something you can set on your floated elements to make the element below it clear it. It doesn’t really matter why it works, it just does.

.clearfix { display: inline-block; }

.clearfix:after {
content: “.”;
display: block;
height: 0;
clear: both;
visibility: hidden;
}

Addition & Subtraction

First grade math, people. If the width of your design is 960 pixels and you have 3 colums, the widths all those columns plus their left and right padding should equal exactly 960. So as long your math adds up and nothing inside those elements is wider, you will be good to go.

Don’t use left and right margins (or negative margins)

Use padding instead of left and right margins. IE6, particularly, will become much harder to work with if you put left and right margins on your elements, this is just the natural order of the world, so get over it and don’t use them. Also, negative margins might seem like a good solution, and they should be, but you are safe just staying away from them.

Test constantly

I work on a mac, so as soon as I get even the basic layout going, I flip over to a PC to make sure it works there, and I keep doing that at every little step of the process. If you wait until you have the whole thing coded to test out somewhere else, you are setting yourself up for failure and frustration. This is probably the most important thing to do. It’s basic troubleshooting and it makes it much easier if you only have to look at the last couple of things you’ve done to see where it went wrong.

So, again, it’s really not that hard if you set yourself up for success. Complaining about IE6, or windows, or how css doesn’t work the way you want it to is waste of energy and brainpower. Just accept that these are the parameters you have to work with, get over it and get the job done.