Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Vertical Spacing without Margins

  • This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #36501
    sheepysheep60
    Participant

    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:




    Content.


    or this one:




    Content.


    They both seem riddled with unnecessary markup.

    Thanks! Dave

    #96174
    chrisjg
    Member

    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…

    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.

    #96208
    sheepysheep60
    Participant

    Hey Chris that’s super clever – thanks for the reply!

    #96254
    sheepysheep60
    Participant

    Hey I really like that…! Awesome.

    I wish these both worked in IE8 though…

Viewing 4 posts - 1 through 4 (of 4 total)
  • The forum ‘CSS’ is closed to new topics and replies.