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

CSS (Subtle Emboss)

#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)

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