Forums

siouxfan45

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

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
}

ChrisP

#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.

David_Leitch

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, where I've put the sidebar as 200px, with the content filling up the rest of the container.

siouxfan45

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

ChrisP

@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

siouxfan45

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

ChrisP

#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

siouxfan45

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

ChrisP

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

ChrisP

@siouxfan45, Looking at 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.

David_Leitch

Hey, I had a look at how WebDesignerWall.com pulled it off and this is as close as I could get. Hope it helps :)

siouxfan45

Thanks for all your help guys!

treehouse : what would you like to learn today?

Forums

Responsive Layout Troubles