Grow your CSS skills. Land your dream job.

Responsive Layout Troubles

  • # December 17, 2012 at 12:19 pm

    I am attempting to create a responsive design purely via CSS with a fixed sidebar width (in pixels). Unfortunately, my #post_content section is resizing in such a way that the content inside it is not completely filling up its area. Does anybody know what I have done wrong or a better way to approach this problem?

    My working example can be found here: [http://themeforward.com/demo2/?p=1948](http://themeforward.com/demo2/?p=1948 “http://themeforward.com/demo2/?p=1948″)

    Both #post_content (green) and #sidebar (blue) sit inside #container

    My CSS code is below:

    #container {
    margin:0 auto;
    max-width:960px
    }
    #post_content {
    float:left;
    margin-right:300px;
    background:green
    }
    #sidebar {
    float:right;
    width:300px;
    margin-left:-300px;
    overflow:hidden;
    background:blue
    }

    # December 17, 2012 at 12:36 pm

    #container {
    margin: 0 auto;
    max-width: 960px;
    width: 100%;
    }

    #post_content {
    float: left;
    width: 66.66%;
    display: table-cell;
    }

    #sidebar {
    float: right;
    min-width: 300px;
    width: 33.33%;
    display: table-cell;
    }

    ^ That should get your sidebar to sit next to your content.

    # December 17, 2012 at 12:57 pm

    Following on from what @ChrisP has done, you could leave out the percentages if you wanted the sidebar to stay the exact same width, regardless of the width of the browser (I think that’s what you’re after from your desc).

    I’ve put something together [here](http://codepen.io/David_Leitch/pen/jdtrs “http://codepen.io/David_Leitch/pen/jdtrs”), where I’ve put the sidebar as 200px, with the content filling up the rest of the container.

    # December 17, 2012 at 1:49 pm

    Is there a way to do this without using table-cell?

    # December 17, 2012 at 1:53 pm

    @siouxfan45, not that I know of if you want to keep a min-width on that sidebar. Why would you not want to use table-cell? [It’s broadly supported](http://www.browsersupport.net/CSS/display%3Atable-cell “”)

    # December 17, 2012 at 2:03 pm

    I’m trying to figure out how WebDesignerWall.com pulled it off without table-cell, unless I’m missing something in their CSS.

    # December 17, 2012 at 2:08 pm

    #container {
    margin:0 auto;
    max-width:960px;
    }
    #post_content {
    float:left;
    margin-right: -300px;
    background:green;
    width: 100%;
    }
    #sidebar {
    float:right;
    width:300px;
    overflow:hidden;
    background:blue;
    }

    Remove your `margin-left: -300px;` from the sidebar and apply `margin-right: -300px` to your post_content..that does it

    # December 17, 2012 at 2:20 pm

    Thanks for the help, this gets it very close. I had tried something similar earlier with the same result…
    Right now the #post_content area ends up filling the entire width of the #container and underlapping #sidebar. Any suggestions? [http://themeforward.com/demo2/?p=1948](http://themeforward.com/demo2/?p=1948 “http://themeforward.com/demo2/?p=1948″)

    # December 17, 2012 at 2:30 pm

    @siouxfan45, try adding `box-sizing: border-box;` and `padding-right: 300px;` to post_content, and it works. Not ideal though.

    # December 17, 2012 at 2:45 pm

    @siouxfan45, Looking at [WebDesignerWall.com](http://webdesignerwall.com “”), they apply a `margin-right: -268px; width: 100%;` instead of `margin: 0 auto;` to the container, then apply a `margin-right: 268px;` to content_wrapper.

    Hope that helps.

    # December 17, 2012 at 2:47 pm

    Hey, I had a look at how [WebDesignerWall.com](http://webdesignerwall.com “Web Designer Wall”) pulled it off and [this](http://codepen.io/David_Leitch/pen/DbBfy “http://codepen.io/David_Leitch/pen/DbBfy”) is as close as I could get. Hope it helps :)

    # December 18, 2012 at 12:08 pm

    Thanks for all your help guys!

Viewing 12 posts - 1 through 12 (of 12 total)

You must be logged in to reply to this topic.

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