WordPress.org

Ready to get started?Download WordPress

Forums

Moving one sidebar to the left. (4 posts)

  1. thetattooedmama
    Member
    Posted 6 years ago #

    My website is: http://www.allthingscupcake.com/

    I have two sidebars on the right. How can I move one of them to the left and have the posts be in the middle?

  2. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    Hey Mama,

    This is a tricky one.

    First, let me say that I actually prefer them where they are for readability's sake.

    But, it's totally possible to put the content in the middle instead.

    If you look at the markup, the catch is that both of your sidebars are contained within a div #sidebar. Your content (div #main) is, of course, outside of this.

    So, if I were designing this from the ground up, I'd have been inclined not to wrap the sidebars together, but alas, I had no part in it.

    So, if you're not planning on reorganizing the markup of the template, then you may have to resort to absolute positioning.

    Try changing the following:

    #mid {
    clear:both;
    margin:0px;
    position:relative;
    }
    
    #main {
    left:210px;
    margin:20px 0px;
    padding:10px;
    position:absolute;
    width:500px;
    }
    
    #sidebar {
    float:right;
    font-size:11px;
    margin:22px 20px 0px 0px;
    padding:0px;
    width:100%;
    }

    The problem with this is that using absolute positioning takes the positioned element out of the 'flow' of the document. How does this hurt you? The footer.

    In order for the footer to appear where it's suppose to, you can use javascript to detect the height of your main div, but it's a pain and needless, if you ask me.

    So, you could take the content of the footer and include it after one of your sidebars, or you could try:

    #mid {
      margin: 0px;
      clear: both;
      position:relative;
    }
    
    #main {
      float:left;
      margin: 20px 0px;
      width: 510px;
      padding: 10px 0 0 220px;
    }
    
    #sidebar {
      position:absolute;
      font-size:11px;
      margin:22px 20px 0 0;
      padding:0;
      width:100%;
    }

    This solution banks on the idea that you'll always have more content in the main div than you will in the sidebars.

    Hope that gives you some place to start.

    Another tip:

    Add something like this to your style.css to keep your category select dropdown from breaking out of the box:

    select#cat {
      width:160px;
      margin-left:10px;
    }

    Hope that helps. :)

  3. thetattooedmama
    Member
    Posted 6 years ago #

    Thank you so much. Especially for the category tip. I was wondering about that.

  4. Eric Amundson
    Volunteer Moderator
    Posted 6 years ago #

    :) You're welcome.

Topic Closed

This topic has been closed to new replies.

About this Topic