Responsive Layout Troubles

[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](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
}

[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](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.

[David_Leitch]

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 :)

[Author]

Posts