Josef Richter » positioning http://www.josefrichter.com/blog blogging about the world around Sat, 14 Jan 2012 10:55:31 +0000 en hourly 1 http://wordpress.org/?v=3.2.1 CSS positioning with vertical spacers http://www.josefrichter.com/blog/css-postitioning-with-vertical-spacers/ http://www.josefrichter.com/blog/css-postitioning-with-vertical-spacers/#comments Wed, 08 Jul 2009 09:54:44 +0000 Josef Richter http://www.josefrichter.com/blog/?p=217 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.

]]> http://www.josefrichter.com/blog/css-postitioning-with-vertical-spacers/feed/ 1