Grow your CSS skills. Land your dream job.

Fixed Width Sidebar in Responsive Design

  • # March 3, 2012 at 4:53 am

    I’m attempting to create a responsive design that has a pretty common layout. Main content area on the left and a sidebar on the right.

    What I would like to happen is that when the windows is resized the main content div’s width is reduced while the right sidebar remains to have a fixed width.

    I can handle the responsive bit, I’m just trying to figure out how to implement 1 fluid width div and 1 fixed width div while still taking up 100% of the outer container and remaining the margin inbetween the two divs.

    # March 3, 2012 at 5:22 am

    What you would need to do is write a Javascript function to measure the width of the window, subtract the width of the fixed width div and then set this to the other div
    Then call this function on page load and window resize

    There is a way of doing this with css3 calc() but it’s currently only supported in IE and FF

    # March 3, 2012 at 5:28 am

    Thanks dude, not often do you hear that something is supported in IE & not chrome. It’s too bad that there’s no pure CSS solution for this just yet that works in most browsers.

    # March 3, 2012 at 5:39 am

    You can do it with just CSS
    like so -> http://jsfiddle.net/gpxeF/
    But I’ve often found this way to get messy when you have a lot of content
    i.e. is the fixedWidth bar is not as tall as the content, it will distort

    # March 3, 2012 at 5:43 am

    Check this out, It’s a little hacky, but notice the padding on the main area is the width of the fixed area

    http://jsfiddle.net/gpxeF/2/

    # March 3, 2012 at 5:57 am

    Yeah, I just had that idea, cheers! I’ll try it out

    # June 12, 2012 at 3:32 am

    hi guys,
    Is there a way to convert fixed layout design of http://www.thefunnyquotessayings.com to a responsive design ? I am not a highly technical person. Just wondering if there are any tools to convert the site to responsive design. Thank you waiitng for your reply.

    # June 26, 2012 at 4:10 pm

    I found this post really helpful:
    http://www.onderhond.com/blog/work/responsive-grid-old-trick/

    Only one column is responsive (the content column) but it also includes a breakpoint at a certain width by using a media query. Most importantly, the width of the fluid column is adjusted BEFORE the floating sidebar get’s re-stacked after the content column when the breakpoint is reached.

    # October 4, 2012 at 3:24 am

    http://jsfiddle.net/gpxeF/154/

    Just edit these values it should work.

    #fixedWidth{
    width: 200px;
    float: left;
    background: blue;
    display:table
    }
    #theRest{
    background: green;
    display:table
    }

    # January 15, 2013 at 5:13 pm

    Another solution would be to use box sizing and absolutely position the sidebar.

    E.g if your main content was in a div class of main, with an aside sidebar you could do:

    .main {
    padding-right: 180px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }

    aside {
    position: absolute;
    right: 0;
    top: 0;
    width: 180px;
    }

    depends if you need to support IE7 or not – although I believe there is a hack to make box-sizing work in IE7…

    # January 16, 2013 at 4:44 pm

    @karlpcrowley: You can get around the float wrapping by adding:

    #theRest {
    background: green;
    overflow: hidden;
    }

    http://jsfiddle.net/schadeck/VcAS6/

    # January 29, 2013 at 11:25 am

    Why not this: http://jsfiddle.net/UdGXN/ ?

    #fixedWidth {
    position: absolute;
    right: 0;
    top: 0;
    width: 180px;
    }
    #theRest {
    margin-right: 200px;
    }

    # February 7, 2013 at 11:23 pm

    If you are using bootstrap then use this

    CONTENT
    # February 7, 2013 at 11:24 pm

    class=”span2″ style=”position:fixed; right:0″

Viewing 15 posts - 1 through 15 (of 20 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".