CSS positioning with vertical spacers

08.07.09 | 1 Comment

Making layouts in CSS is a real pain. To me it’s like cleaning toilet with a toothbrush – it can be done, you can even achieve great results, but you would probably choose different tool if you could… The community, including Eric Meyer and Shaun Inman obviously longs for a real layout system.

Before we get one, if ever, everyone’s using various hacks. Here is mine – the vertical spacers. I use Blueprint or 960.gs for layout and horizontal positioning and supplement them with this easy piece of html+css. If you need lots of irregular vertical spacing, like me in the below screenshot with arrows where vertical spacing is needed, this might help.

css vertical spacing

So the code is really simple. First we define css classes:

.h10 {
	margin-top: 10px;

.h20 {
	margin-top: 20px;

.h50 {
	margin-top: 50px;

.h100 {
	margin-top: 100px;

hr {
	visibility: hidden;
	clear: both;

The usage in HTML may be as follows:

As you can see you can get various heights by combining the classes. Hardcore CSS proponents may say HTML shall not bear any formatting info. Well, this might be true, but in my view it’s pure theory. Most CSS frameworks breach this rule as well and as long as CSS is so bad for layouting, I don’t care.

Enjoy! If you have any suggestions how to develop this method please leave a comment. Thank you.

Tags: , , ,

1 Comment

have your say

Add your comment below, or trackback from your own site. Subscribe to these comments.

Be nice. Keep it clean. Stay on topic. No spam.

You can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>