Sidebar mysteriously anchored to footer after changing to fixed width

  • Unknown's avatar
    thedigestif · Member ·

    I changed a classic theme blog to fixed width. This worked fine, except that the sidebar didn’t participate. I made its position relative, and now it is anchored or affixed to the footer rather than the top of the page. I can manipulate its position so that it’s just under the header at the right, but any new post moves the sidebar, because it moves the footer. Here is the menu css as I have it:
    #menu {
    background:white;
    border-left:none;
    border-top:none;
    position:relative;
    right:0;
    top:-450px;
    width:178px;
    float:right;
    padding:20px 0 10px 30px;
    }
    To make the blog fixed width, I just copied and pasted this:
    #rap {
    clear:both;
    overflow:hidden;
    width:740px;
    margin:0 auto;
    }

    The link is http://plumblines.wordpress.com

    Any help would be much appreciated. Thanks!

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    thedigestif · Member ·

    To clarify what the problem is, I am changing the menu top margin to zero. You will note that this affixes it to the top of the footer.

  • Unknown's avatar
    gwideman · Member ·

    There’s some confusion here over the position attribute: relative doesn’t do what I suspect you think it does. It positions relative to where that element would normally position, NOT relative to some container. To position relative to a container, use position:absolute, and then pay attention to which element is the container.

    Basically, I think you’re trying to get the menu to position to the right of the content. One way to do that is to position the menu div at an absolute position with in the rap division. This requires 2 ingredients:

    1. Add position:relative to the rap div. This will have no impact on the position of rap (it will position with 0,0 offset relative to where it would normally position, so that’s fine.) The main point is to give it a position setting other than “static” (default), and the reason for that is to cause it to become the position-frame-of-reference for children who position absolutely..

    2. Set the menu div to have:
    position: absolute;
    top: 250px; (or so)
    left: 540px; (or so)

    All of this made much easier if you have Firebug at hand:
    http://grahamwideman.wordpress.com/2009/01/23/firebug-essential-for-cssing-wordpress/

    Hope that helps

  • Unknown's avatar
    thedigestif · Member ·

    Thanks! This worked perfectly.

  • The topic ‘Sidebar mysteriously anchored to footer after changing to fixed width’ is closed to new replies.