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