If you have some experience with CSS layouts you probably know the feeling of hopelessness when you are staring at some box overlapping something it shouldn’t and so on. You tried dozens of possible rules combinations that came to your mind but nothing helps.

Over time I gathered some simple techniques that help me to deal with CSS problems much easier and straightforward. If you aren’t new to web design you for sure know or use some of them.

Proper tools

First you should have the proper tools that will help you with common tasks like validating your document: Everybody knows Web Developer Toolbar for Firefox. Then there is the Web Developer Toolbar for Opera and one for Internet Explorer from the IE team too. Since you should test your pages in all of these browsers (at least on Windows platform) it’s good to have the same functionality in all of them.

Recently a browser called Swift has been released. It’s based on the WebKit rendering engine which Safari on Mac uses. This is invaluable for testing your sites on your Windows box. So go ahead, download it and start testing your pages with it too.

What can you do in your stylesheets

Let’s start with some tips. Note that you are not going to delete the actual styles for the area you are working on. You just add these to determine where exactly the problem lies. The big advantage here is that you can determine the error quickly.

Outline them all

html body #something * {
border: 1px solid Red;
}

Add a border (of your favorite color) to all the elements nested in #something. Note you are using such a specific selector that this style will overwrite all the other ones. This quickly gives you an understanding of what exactly are the sizes and positions of all the elements in the area. From my experience with this you can reveal like 80% of all the problems. Just don’t forget to remove it when fine tuning. Remember border adds to the resulting width of the element.

No margins please

html body #something * {
margin: 0;
padding: 0;
}

This is invaluable when you think you have some padding or margin doing mess in your layout (and this is a very common problem). It resets the margins and paddings to 0 in all the elements nested in #something. If the problem does not disappear you know the margins and paddings are not the cause and you should look elsewhere.

As you can see the universal selector * is very useful. You can reset any setting like this across the desired area. With this technique you identify the rule which is causing problems in no time. Then you can take the proper action.