How do you implement a fixed left sidebar and fluid right content in CSS

Question

I got headache how to make my fluid content will float to right.

1. left sidebar is fixed size.
2. right content is fluid size.

Here and example my html and css

How to make my id="content" will float on right?

Answer 1

There is actually an even easier solution to this which i discovered not too long ago. Works well back to IE7. The #fluid div will slide up next to the fixed fix and take up the remaining space while maintaining great fluidity for all responsive sites. Dont need put a float or width on the fluid div at all.

http://jsfiddle.net/HWMJc/874/

#sidebar {
  float:left;
  width:100px;
}
#content {
  overflow:hidden;
}

Answer 2

Set a margin and remove the float/width on #content, like so:

HTML:

<div id="wrapper">
  <div id="sidebar">Sidebar</div>
  <div id="content">Content</div>
</div>

CSS:

#wrapper {
    width:400px;
    overflow:hidden;
    padding:10px;
}
#sidebar {
    float:left;
    width:100px;
}
#content {
    margin: 0 0 0 100px;
}
div {
    border:1px solid #333;
}

http://jsfiddle.net/HWMJc/1/