Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Fixed Width Sidebar in Responsive Design

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #36957
    aprea
    Participant

    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.

    #98030
    aprea
    Participant

    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.

    #98036
    aprea
    Participant

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

    #102949
    kimil
    Member
    #104267
    funnyrajj
    Member

    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.

    #104897
    mtchao
    Member

    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.

    #111262
    Reegan
    Member

    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
    }

    #121108
    davislurve
    Member

    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…

    #121192
    schadeck
    Member

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

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

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

    #122733
    normadize
    Member

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

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

    #123768
    Moeed
    Member

    If you are using bootstrap then use this

    CONTENT
    #123769
    Moeed
    Member

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

    #128353

    normadize’s code worked best for me. Here is an example page which also includes some padding. I’ve also added some comments to the code if you want to put the sidebar on the left (very easy). Have tested this on various machines/browsers and it renders perfectly in all…

    body {
    background: orange;
    }
    #container {
    max-width: 1000px;
    min-width: 768px;
    margin: 0 auto;
    background: yellow;
    }
    #header {
    background: purple;
    color: white;
    text-align: center;
    padding: 10px;
    }
    #main {
    position: relative;
    }
    #sidebar {
    background: blue;
    width: 200px;
    color: white;

    position: absolute;
    top: 0;

    /* change this to “left: 0;” if you want the sidebar on the left. Also change the “margin-right” below. */
    right: 0;

    padding-top: 20px;
    padding-bottom: 20px;

    padding-left: 10px; /* If you change this value, remember to change the margin-left value of #content */
    padding-right: 10px; /* ditto */
    }
    #content {
    background: red;

    /* change this to margin-left if you want the sidebar on the left. Also change the “right” code, above. */
    margin-right: 220px; /* sidebar_width + sidebar_left_padding + sidebar_right_padding = 200px + 10px + 10px */
    padding: 1em; /* whatever */
    }
    #footer {
    background: green;
    color: white;
    padding: 10px;
    }

    THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT ** THIS IS THE MAIN CONTENT

    lorem ipsum

    lorem ipsum

    lorem ipsum

    lorem ipsum

    lorem ipsum

    sub heading

    lorem ipsum

    lorem ipsum

    lorem ipsum

    lorem ipsum

    sub heading

    lorem ipsum

    lorem ipsum

    lorem ipsum

    lorem ipsum

    #128378

    …you will also need to specify the height of the sidebar to prevent overlapping if the sidebar is taller than the main content.

    #132400
    bah2002us
    Participant

    2 sidebars fixed and main area fluid.

    **HTML**


    <aside class="fixd2">Fixed 1</aside>
    <aside class="fixd1">Fixed 2</aside>
    <main class="main">
    <section>
    <article>The rest of the space</article>
    </section>
    </main>

    **CSS**


    aside, section, main, article { display: block; }
    .fixd1 { width: 200px; float: left; background: orange; }
    .fixd2 { width: 200px; float: right; background: yellow; }
    .main{ background: red; margin: 0px 200px 0px 200px; }
Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.