Adding dividers between posts and columns

SillyGrrl.com // Adding dividers between posts and columns

Today I’ve got an easy tutorial for those of you with busy sidebars. A great way to clean up your design is by adding a little extra padding and a divider between your sidebar and content.

The easiest way to accomplish this is by adding a border to the side of the longest column. If you add the border to the sidebar it won’t go to the bottom of your blog, so I’m adding it to the left of the content column.

#content {
width: 650px;
float: right;
padding-left: 20px;
border-left: 1px dashed #aaa;
}

The border will be 1px wide, dashed and light gray. Borders can be solid, dashed, dotted, double, ridge, groove, inset or outset.

You can also add an image as a divider:

#content {
width: 650px;
float: right;
padding-left:20px;
background-image: url(/divider.png);
background-repeat: repeat-y;
background-position: 0px 0px;
}

The image will repeat vertically and the beginning position will be at the top left corner of the content div.

SillyGrrl.com // Adding dividers between posts and columns

You can also use the same method to add a border to separate your posts:

#content .footer {
border-top: 1px dashed #aaa;
width: 650px;
}

OR

#content .comment {
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 20px;
border-bottom: 1px dashed #aaa;
width: 650px;
}

I’ve added the same size, type and color border to keep my design consistent. You’ll notice I’ve also added a width to make sure the line is the same width of my posts.

To do this with an image simply add a background to the element and adjust the margins and padding to place the image where you want it.

#content .comment {
text-align: left;
padding-top: 10px;
padding-bottom: 10px;
margin-bottom: 20px;
background: url(/post-divider.png) no-repeat;
}

New to the shop – a fully customizable template!

I’ve added a new template for those of you looking to create a design on your own. It’s a bare-bones, two column theme for WordPress, so you can add your own header, background, buttons, fonts, colors and test your coding skills! Get it here >>>

Nerd Party: Clever coding & design tips for busy bloggers

Related Posts Plugin for WordPress, Blogger...
dashed-line
dashed-line

Comments

  1. Jessika says

    Hi Sarah,

    I’m so glad you did this tutorial, but this is going to be a silly question…where do you install the code? I’ve tried in the Advanced CSS area (of blogger) and also through editing my html code but no divider shows up. I’m not sure if i’m putting it in the right place.

    Thanks,
    Jess

    • Sarah says

      Hey Jess – You’ll need to figure out which div to apply it to. The Firefox/Chrome Web Developer tool is great for this. It’s likely something like .main-inner .column-left-inner or .main-inner .column-right-inner instead of #content.

  2. Amanda says

    I just found your blog yesterday and I’m so glad I did! I’ve subscribed and have already looked through all your “nerd party” posts! I have some coding to do :)

    I’m having the same problem as Jess, though.

    Also, if I did want to add the divider to my left sidebar instead of the content column, would I put this?:

    #sidebar {
    width: 300px;
    float: left;
    padding-right: 20px;
    border-right: 1px dashed #aaa;
    }

    Thank you!

  3. Allie says

    hey! I have a problem. my sidebar is on the RIGHT of the content so when using this code, it realigns everything :( how do i get it on the RIGHT between the content & sidebar ??

  4. Hannah says

    I couldn’t figure out where to put this either. I went into the HTML on my blogger but nothing happens.

  5. Tze says

    Thank you so much for this post–being someone who stopped learning code after HTML4 (HAH!) I really appreciate tutorials like these with screenshots and ready-to-use code snippets!
    I wasn’t sure where to put the code at first, so it was a bit of “try this and see if anything explodes”, but it worked in the end. Not perfectly yet (I couldn’t centre the border on the bottom), but now I can at least keep on experimenting until it’s just right.
    Thanks again! :)

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>