Responsive Fixed Width Sidebar: Why and How?

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.

But why use fixed width sidebar?

Here are several reasons why we might want fixed width sidebar:

1. It’s more predictable for user (One moving area vs two ).
2. It look better (IMO)
3. For ad block.
4. 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: