WordPress.org

Support

Support » Themes and Templates » Moving one sidebar to the left.

Moving one sidebar to the left.

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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. 🙂

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

    🙂 You’re welcome.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Moving one sidebar to the left.’ is closed to new replies.