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:
- It’s more predictable for user (One moving area vs two ).
- It look better (IMO)
- For ad block.
- It’s possible, so why not?
2 Columns Responsive Fixed Width Sidebar
So the trick to create this layout is using negative margin to the content area.
In this example I use 300px width right sidebar layout.
HTML Structure:
The HTML structure for this layout is just a regular HTML structure
<div class="wrapper"> <div class="content"> </div><!-- .content --> <div class="sidebar"> </div><!-- .sidebar --> </div><!-- .wrapper -->
CSS for Wrapper Element:
.wrapper{ margin-right: 300px; }
CSS for Content Element:
.content{ width: 100%; float: left; }
CSS for Sidebar Element:
.sidebar{ float: right; width: 300px; margin-right: -300px; }
And that’s it. You can check the source code for better example.
3 Columns Responsive Fixed Width Sidebar
So, both sidebar is using fixed width. This is a lot harder, not only it’s using negative margin, we also need to use padding to float the elements properly.
In this example I use 200px width sidebar, with “Sidebar 2 – Content – Sidebar 1” Layout.
HTML Structure:
<div class="container"> <div class="main"> <div class="wrapper"> <div class="content"> </div><!-- .content --> <div class="sidebar-1"> </div><!-- .sidebar-1 --> </div><!-- .wrapper --> </div><!-- .main --> <div class="sidebar-2"> </div><!-- .sidebar-1 --> </div><!-- .container -->
As you can see. It’s a lot more complex, but it’s actually the same as 2 column layout. The difference is the second sidebar is outside the wrapper element.
CSS for Main Element:
.main{ float: right; padding-left: 200px; width: 100%; }
Note: You need to use box-sizing to all element.
CSS for Sidebar 2 Element:
.sidebar-2{ float: left; margin-right: -200px; width: 200px; }
And the rest (inside wrapper element) is similar with 2 Column Layout, using negative margin for sidebar.
CSS for Wrapper Element:
.wrapper{ float: none; margin-right: 200px; }
CSS for Content Element:
.content{ float: left; width: 100%; }
CSS for Sidebar 1 Element:
.sidebar-1{ float: right; margin-right: -200px; width: 200px; }
WordPress theme example
You can check my WordPress Theme: Genbu, with 9 Layout Option, and all layout is using fixed width sidebars.
Well, actually all my themes are using similar technique, So you can check all of them too 🙂
Almost forgot, another example would be WordPress Admin Page:
Thanks. It’s really helpful. Would it be possible to explain how you deal with viewports i.o.w. how to complete it in a full responsive design? I can figure it out for the double sidebar, but beyond that it gets a bit tricky (for me anyhow). Anyway, I love your designs. Keep up the good work!
I’m not sure how to explain it. However, you can check this CSS to understand how I calculate Media Queries break points,
http://html.shellcreeper.com/layout-collection/fixed-width-sidebar-2-col/style.css
I hope it helps.
Yes, helpful. Thanks! I have one other question though. If you’d want your images, code-blocks and video on this very template to be filled in the complete width of the column, how would you do that? I’ve been searching for an answer on all over the web, but I can’t find a proper (CSS-)solution (except for using margin on headline, paragraph and all other divs and keeping the column without padding, but that’s an awful lot of work if you have many divs)…
I don’t understand your question (sorry)
have you try to set width 100% in your css (?)
Hi David, I mean: the pics on your website—if you would have them full width (w/o padding) how would you do that?
I’m not exactly sure what you mean,
feel free to contact me via email https://shellcreeper.com/contact/ with more details so i can help you better.
but you can try use negative margin. for the element. for example:
Hey David, not to trump your article as it is certainly a valid method, but I wanted to add in the ability to use the calc function as an option. For this instance all you need is:
.content {width: calc(100% – 300px);}
.sidebar {width: 300px;}
Browser support is almost across the board now (minus IE..) and using either a preprocessor or straight css fallbacks can work around that and as is the case, the more it is used, the more browser vendors will comply..
http://caniuse.com/#feat=css-variables