Forums

Give help. Get help.

  • # 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: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: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″

    # March 15, 2013 at 10:55 am

    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

    # March 15, 2013 at 1:31 pm

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

    # April 19, 2013 at 2:57 am

    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.

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag