RapidWeaver Snippets Button

Simple Divider Snippet

We’ve had several customers request coding to duplicate some of our simple looking dividers on various websites of ours. In response we decided to create a free stack call Simple Divider.

Due to the simplicity of this Stack I imagined that some users might prefer to use a snippet instead, so this post is being created for that purpose.

HTML

1
2
3
<div id="simpleDivider">
     <div class="theDivider"></div>
</div>

CSS (Subtle Emboss)

1
2
3
4
5
6
7
8
9
10
11
#simpleDivider {
     width: 100%;
     clear: both;
     padding-top: 20px;
     padding-bottom: 20px;
}
#simpleDivider .theDivider {
     width: inherit;
     border-top: solid 1px #CCC;
     border-bottom: solid 1px #FFF;
}

CSS (Solid)

1
2
3
4
5
#simpleDivider .theDivider {
     width: inherit;
     height: 4px;
     background-color: #E0E0E0;
}

Why two <div> tags and not just one?

Placing a div tag inside of a div tag protects against spacing issues that occur when floated elements are placed above. Example, if there was simple one div tag and a margin was created for the top the margin would not display if there were certain elements floated above it, despite the clear call. The easiest solution, in my opinion, is to contain the existing tag inside another element and create padding, which will have no visible effect other than achieving the desired spacing.

4 thoughts on “Simple Divider Snippet

  • By Henry Halem - Reply

    Thanks for what you guys do to make RW such a great program.

    • By One Little Designer - Reply

      Thanks Henry,

      Trying to do just that – glad we’re able to make the experience enjoyable

  • By Tom - Reply

    Many thanks for the free divider stack and great themes. You make using RW easier and more fun! Happy New Year.

    • By One Little Designer - Reply

      Glad we can add to the experience Tom :)

      Let me know if you ever have any requests or ideas for new things we can add and possible give away for Free :D

Leave a Reply

Your email address will not be published. Required fields are marked *
You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>