In responsive design, usually we use percentage width for sidebar and content width. It’s easy to do. For example 60% content with 40% sidebar. So both Content and Sidebar width will scale using this ratio.
This approach is widely use, but I don’t personally like it. I prefer to have a fixed width sidebar, like this:
Implementing fixed width sidebar in responsive design is actually possible (even though it’s a little tricky).
In this post I will cover both 2 column and 3 column layout with full example.
Note: I’m not using JS to create the layout, And I also did not use calc() CSS because a lot of browser don’t support this yet.
But why use fixed width sidebar?
Here are several reasons why we might want fixed width sidebar: