Search code examples
csslayoutcss-floatpositioningsidebar

2-Column Fixed Width Sidebar w/ Fluid Content Not Aligned Properly


I've been running into this problem for setting up 2-column layouts with a fixed sidebar floated to the right. I'm setting a margin on the content container so it will be fluid as you resize the browser window.

However the content section is actually "above" the sidebar, and so new content pushes the sidebar down the page. You can see a live demo here which I setup for a basic layout.

The only way I know to fix this is by moving the sidebar above the content in my HTML markup. But this doesn't really feel like a fix, and honestly I would like my content to appear before the sidebar since that's how the document is structured. Is there any way to keep the floated sidebar aligned right at the top with the content area?


Solution

  • Have a look at the Media Object http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

    demo: http://dabblet.com/gist/3729182

    Since you have not provided the widths for the columns, I used my own in percentages. You can use Media Queries to clear the sidebar once it gets too thin.