IE 9 pushes sidebar inside content section

PaulVictor said
What exactly doesn’t look correct?

on my FF (and also chrome) it looks exactly same as your screenshot, sidebar inside the content.

I think you added sidebar first as a IE7 hack (to make float right work correctly), is that correct?

sevenspark said
Can I ask why you’re printing the sidebar before the main content? I’d recommend swapping those for SEO purposes. It also makes a right-sidebar layout easier.

Good question, I’m still kind of new to this so I did not know about that. I’ve tried placing the sidebar code below the content code but that breaks the layout. The sidebar is then located at the footer (broken).

dexterous said

PaulVictor said
What exactly doesn’t look correct?

on my FF (and also chrome) it looks exactly same as your screenshot, sidebar inside the content.

I think you added sidebar first as a IE7 hack (to make float right work correctly), is that correct?

That’s odd, it looks good in my Firefox and Chrome browser. I’m not too sure why I’ve placed the code on top of the content code but I think it had to do with the broken layout, due to the sidebar (in FF).

PaulVictor said

sevenspark said
Can I ask why you’re printing the sidebar before the main content? I’d recommend swapping those for SEO purposes. It also makes a right-sidebar layout easier.

Good question, I’m still kind of new to this so I did not know about that. I’ve tried placing the sidebar code below the content code but that breaks the layout. The sidebar is then located at the footer (broken).

Have you tried working with a grid system? It makes this type of question trivial

You might check out something like 960gs http://960.gs/ – not everyone likes them (like everything, it has proponents and detractors), but if you’re running into layout issues, grids make things a lot easier much of the time.

Anyway, if you have the main content and the sidebar sized properly, and float the sidebar right with your current layout, you shouldn’t have any issue creating a right sidebar layout in the semantically “correct” order.

Actually, I think this is the issue:

Your right sidebar is getting “stuck” on your menu, which is wrapping to two lines. A quick fix would be to add clear:both; to the .container div, which resolves the issue in my tests

Alternatively, I expect that fixing the menu would also solve the problem.

But you should really put the sidebar after the content.. Just move it, float the content(left), add a clearfix class to the main container, then add display:block; to it.. It should fix your issue.

Clearfix link: http://www.webtoolkit.info/css-clearfix.html

sevenspark said

Have you tried working with a grid system? It makes this type of question trivial

You might check out something like 960gs http://960.gs/ – not everyone likes them (like everything, it has proponents and detractors), but if you’re running into layout issues, grids make things a lot easier much of the time.

Anyway, if you have the main content and the sidebar sized properly, and float the sidebar right with your current layout, you shouldn’t have any issue creating a right sidebar layout in the semantically “correct” order.

Yes, I know about the 960 grid system but I want to have more control of my layout.

The sidebar has already been floated to the right and I have checked the widths of the div’s. Crossbrowser testing is terribly frustrating, especially since I don’t know what to do next.

RubenBristian said
But you should really put the sidebar after the content.. Just move it, float the content(left), add a clearfix class to the main container, then add display:block; to it.. It should fix your issue. Clearfix link: http://www.webtoolkit.info/css-clearfix.html

Thank you Ruben, I’ve added the code to my CSS but I’m not too sure how to implement it in my HTML . Any tips? I will try to adjust my coding and upload it when it’s fixed.

http://pastebin.com/B94HtR15

Just replace the inline styling..

I have reuploaded the files to the server and this is what I have done:

1. Switched the sidebar code below content code.
2. Changed the clearfix’s display from inline-block to block.
.clearfix { display: inline-block; }
3. Inserted your Pastebin code from the first blog post code to the sidebar code…

But I still have issues as you can see from the demo:

http://samplr.paulvictor.nl/demo/

The footer is messed up as well. I don’t know what to do.