[Solved] Right Side bar drops with each new post

[amnesiacen]

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

[blue642]

can you link the site?

It sounds like a float clearing issue.

[amnesiacen]

whoops!

http://www.brandonrice.net

[blue642]

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.)

[amnesiacen]

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…

[blue642]

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.

[amnesiacen]

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

[blue642]

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

[Author]

Posts