Grow your CSS skills. Land your dream job.

[Solved] Right Side bar drops with each new post

  • # September 8, 2009 at 12:33 pm

    I’ve been trying for the past week and I still can’t seem to get the right sidebar to stay at the top. The top of the right sidebar is supposed to be level with the top of the nav bar on the left.

    The only way I can seem to get it into position is if I use margin-top and nudge it up in pixels. This isn’t a permanent solution though because each time I make a new post the right sidebar then drops relative to the length of the new post.

    Here’s where I think it might be an issue:
    (line 172)

    # sidebar {
    float:right;
    margin-top:-1409px;
    width:170px;
    }

    If you have any ideas, any steps I should go through to troubleshoot please let me know.

    Thanks for your time,
    Brandon

    # September 8, 2009 at 12:55 pm

    can you link the site?

    It sounds like a float clearing issue.

    # September 8, 2009 at 12:59 pm

    whoops!

    http://www.brandonrice.net

    # September 8, 2009 at 1:26 pm
    "amnesiacen" wrote:
    I’ve been trying for the past week and I still can’t seem to get the right sidebar to stay at the top. The top of the right sidebar is supposed to be level with the top of the nav bar on the left.

    The only way I can seem to get it into position is if I use margin-top and nudge it up in pixels. This isn’t a permanent solution though because each time I make a new post the right sidebar then drops relative to the length of the new post.

    Here’s where I think it might be an issue:
    (line 172)

    # sidebar {
    float:right;
    margin-top:-1409px;
    width:170px;
    }

    If you have any ideas, any steps I should go through to troubleshoot please let me know.

    Thanks for your time,
    Brandon

    if your sidebar is dropping down the page until after your content in the main area, then you need to space it out better, or just use overflow:hidden;

    # September 8, 2009 at 1:50 pm

    whats happening is your not thinking about the box model properly. Your wrapper is set to 940 px, and your 3 columns are "nav-column 135px wide, "main-column" 580px wide, and "sidebar" 170px wide totalling 885px. The problem is that you’ve added padding to the first two. Padding increases the size outward from the width applied. so your "nav-column" is 135+5px, "main-column" 580+90px, and "sidebar" 170px, totalling 980px 40px over your allowed width (set by the wrapper"

    So to fix, you could set the width to less say 130 px? and float all three columns left. (instead of the last one right.)

    # September 8, 2009 at 5:37 pm

    I tried clearing all the width margins throughout, widening the page-wrap up to 2000px (plenty of room I thought), but the right sidebar (#linksidebar) still sits at the bottom of the page.

    I did the above in combination with the right sidebar (#linksidebar) floated left. When I did this it moved that sidebar to the left of the main column (which I don’t want) and it still stayed near the bottom of the page.

    I must still be missing something.

    Thanks for the help thus far…

    # September 8, 2009 at 7:34 pm

    In order for the float left to work, you’d need all 3 columns floated left. Try this: leave your wrap set to 2000px, float the sidebar Left and also float the main-column left. The sidebar should snap to the right of the main column right up top. (remember to remove your large negative top margin. ) if you floated your second sidebar left it should float to the right of that as well.

    I’d suggest that you look at the 960 grid system and use it as a prototype for this layout, it floats each column to the left like I suggested. It takes a few minutes to understand, but becomes a great prototyping resource.http://www.960.gs

    this was typed from my iPhone so please excuse any typing errors that may have occured.

    # September 8, 2009 at 10:19 pm

    This worked perfectly! Thank you blue642, you’ve just made my day.

    # September 9, 2009 at 8:01 am

    No problem, I’m happy that I could assist.

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".