WordPress.org

Ready to get started?Download WordPress

Forums

How do I add a line to separate my sidebar from my content? (5 posts)

  1. d.b.s.
    Member
    Posted 1 year ago #

    This is my site: http://swgnt.com/ I want to add in a vertical line to divide the content from the sidebar on the right. How do I do this? I am not very familiar with css and was directed to via a previous wordpress forum. I dont really understand what's going on here. Will somebody please explain this to me as if you were explaining it to a toddler? Thanks.

  2. michael.mariart
    Member
    Posted 1 year ago #

    What you need to do is add somethng like this to your style.css file:

    div#primary {
        border-right: 1px solid #666666;
    }

    Taht will give a 1-pixel wide border on the right-hand side of the <div> tag with the ID of 'primary' (your main content container).

    Of course you will probably want to do more then just that, and that may not give you the efeect that you are looking for. Consider this a good time to start learning CSS. ;)

  3. d.b.s.
    Member
    Posted 1 year ago #

    Thanks, I still have a problem though. When I put in the border, it pushes the entire sidebar away from its place on the right side to the bottom of the site. How can I put in the border without affecting the sidebar?

    Here are a couple screenshots to better help you understand what I'm talking about.

    before:

    http://i1341.photobucket.com/albums/o741/dbensimon1011/ScreenShot2012-12-09at123605PM.png

    after:

    http://i1341.photobucket.com/albums/o741/dbensimon1011/ScreenShot2012-12-09at123620PM.png

  4. michael.mariart
    Member
    Posted 1 year ago #

    This is a common problem when you go messing around with CSS. ;)

    What's happened is that by adding an extra pixel or two of width by adding in an extra line, it's pushed the width of the pages elements out to wider then is allowed in the pain parent element. Because the elements are floated, they move to where they can fit, which in this case is below the rest because there's not enough room left. What you need to do is figure out where you can take out one or two pixels from somewhere else in the layout so that it can all fit again.

    Once again... This is a time when you need to look at learning a lot more about CSS and how it works. It will take time and effort, but you'll get there pretty quickly.

  5. d.b.s.
    Member
    Posted 1 year ago #

    I've looked all over the coding for a place to remove pixels, but can't seem to find anything. I think this may have something to do with the theme I'm using (they may be hiding it). I'm not sure though. Is there something I can add into the css to take away pixels from the sidebar?...or main post area if not the sidebar? Preferably the sidebar though.

    It's entirely possible that I'm looking about this wrong and it's right there in front of me, but I can't seem to figure out how to get there if it is. This is my last question before I put the time into learning css. Thanks, you've been so helpful already. :)

Topic Closed

This topic has been closed to new replies.

About this Topic