Forums

sheepysheep60

Hi!

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:


<div style="padding:10px 0;">
	 <div class="div-to-be-spaced">
	 	 Content.
	 </div>
</div>

or this one:


<div style="height:10px"><!-- spacer --></div>
<div class="div-to-be-spaced">
Content.
</div>
<div style="height:10px"><!-- spacer --></div>

They both seem riddled with unnecessary markup.

Thanks! Dave

chrisjg

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

<div class="div-to-be-spaced">
          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.
</div>
<div class="div-to-be-spaced">
          The content in this div is sparated from the previous div by an apparent margin of 10px;
</div>

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...

Some CSS

.div-to-be-spaced {
    width:150px;
    color:white;
    padding-bottom: 10px;

    background: -moz-linear-gradient(top,  rgba(0,0,255,1) 0%, rgba(0,0,255,1) 96%, rgba(0,0,255,0) 96%, rgba(0,0,255,0) 100%); /* FF3.6+ */

    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,255,1)), color-stop(96%,rgba(0,0,255,1)), color-stop(96%,rgba(0,0,255,0)), color-stop(100%,rgba(0,0,255,0))); /* Chrome,Safari4+ */

    background: -webkit-linear-gradient(top,  rgba(0,0,255,1) 0%,rgba(0,0,255,1) 96%,rgba(0,0,255,0) 96%,rgba(0,0,255,0) 100%); /* Chrome10+,Safari5.1+ */

    background: -o-linear-gradient(top,  rgba(0,0,255,1) 0%,rgba(0,0,255,1) 96%,rgba(0,0,255,0) 96%,rgba(0,0,255,0) 100%); /* Opera 11.10+ */

    background: -ms-linear-gradient(top,  rgba(0,0,255,1) 0%,rgba(0,0,255,1) 96%,rgba(0,0,255,0) 96%,rgba(0,0,255,0) 100%); /* IE10+ */

    background: linear-gradient(top,  rgba(0,0,255,1) 0%,rgba(0,0,255,1) 96%,rgba(0,0,255,0) 96%,rgba(0,0,255,0) 100%); /* W3C */

}

See it working at http://jsfiddle.net/5rmvy/2/

You can do the same with vertical spacing by changing the background gradient fill to run horizontally. Usethe colorzilla gradient editor to generate the fill CSS code.

Hope this helps.

Chris.

sheepysheep60

Hey Chris that's super clever - thanks for the reply!

Hompimpa

Or, with transparent border and background-clip: http://jsfiddle.net/tovic/8KqE6/

sheepysheep60

Hey I really like that...! Awesome.

I wish these both worked in IE8 though...

treehouse : what would you like to learn today?

Forums

Vertical Spacing without Margins

Some simple HTML

Some CSS