so i’ve been trying to restructure a blog, but i can’t get the sidebar to float on the right like it should and i have no idea why. the closest i can get it is on the right but below all the other content.
so far i have only looked at in in FF3 on OSX, so if it looks a bit wonky in anything else i’d like to know but don’t worry about it too much. i’m focusing on getting it right for me before anyone else.
The problem you’re having is a pretty common one and it is because you’re not floating your main content.
If you’re floating the right side, but not the main content area you need to have your floated item above the non-floated item on the page. Normally, with most blogs with a right sidebar, both the main content area and the right sidebar are floated left, and kept in place with a container div. This way, the main content stays at the top of the document for SEO reasons, and the sidebar comes after the main content in the document.
If the main section isn’t floated then the order should be:
wrapper div -> sidebar div ->main content div
lower the width of your main content. I would bet that the sidebar doesn’t have enough room to sit on the right of the content and that is pushing it down. add a red background color to your content and your sidebar that way you can see better where the boundaries of the content and sidebar are sitting. Then you can adjust the width accordingly. Don’t forget to clear any floated divs.
That’s basically what I did. It turned out that most of this was me not messing up floats but rather widths…