Currently I use Ryan Fait’s sticky footer on almost every site I own or set up. I love it. One issues I’ve come across though is that spacing sections of a site vertically can turn out to be a bit of a nightmare, as it doesn’t like you adding vertical margins to content.
Is there a nice way of spacing my elements vertically without using margins?
At the moment I use all sorts of horrible techniques.
This one as to keep the background colour a particular colour, you can’t just pad the div you’re trying to space:
Have you tried using a gradient fill background with an opacity change from 1 to 0, then padding the bottom to your div?
The effect is that (with a little tuning of the background) you can get it to look like there is a horizontal margin.
Some simple HTML
The content in this div is separated from the next div by about 10px - using padding of 10px below it, and a gradient fill for the background with a hard stop at 96% from opacity:1 to opacity:0. Giving the appearance of being spaced by a horizontal margin.
The content in this div is sparated from the previous div by an apparent margin of 10px;
To have the background blue, text colour white and the gradient fill turning transparent at 96% of the height of the div. use the following…