¿Cómo se implementa una barra lateral izquierda fija y contenido fluido correcto en CSS

Question

Tengo dolor de cabeza cómo hacer que mi contenido fluido flote a la derecha.

1. left sidebar es el tamaño fijo.
2. contenido correcto es el tamaño de fluido.

Aquí y example mi html y css

Cómo hacer que mi id="content" flotará en la derecha?

Answer 1

establece un margen de quitar el flotador y/anchura en #content, así:

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/

Answer 2

no hacer use 100% de ancho en # contenido.
70% funciona, pero hay un pequeño espacio entre los dos elementos. Sin embargo, puedes ajustarlo para que se ajuste mejor.

Answer 3

En realidad, hay una solución aún más fácil para esto que descubrí no hace mucho tiempo. Funciona bien hasta IE7. El div #fluid se deslizará hacia arriba junto al arreglo fijo y ocupará el espacio restante, a la vez que mantendrá una gran fluidez para todos los sitios receptivos. No es necesario poner un flotador o ancho en el div líquido en absoluto.

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

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

Answer 4

debe ponerlo a ser:

sidebar{ width:100px; float: left}