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

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

1. left sidebar is fix开发者_JAVA技巧ed size.
2. right content is fluid size.

Here and example my html and css

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

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/

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;
}

You should set it to be:

sidebar{ width:100px; float: left}

Don't use 100% width on #content.
70% works, but there is a small gap between the two elements. You can adjust it to make it fit better though.