Div izquierdo 200px ancho, contenido div el resto?

Question

body { 
       font-family: Arial, Helvetica, sans-serif; 
       font-size: 13px; 
      } 

      #wrapper { 
       padding: 1px; 
       margin: 0 auto; 
      } 

      #left { 
       width: 200px; 
       float: left; 
       background: orange; 
       position: fixed; 
       text-align: center; 
       padding: 2px; 
      } 

      #content { 
       float: right; 
       text-align: left; 
       padding: 2px; 
       width: ???; 
       background: #F0F0F0; 
      } 

Hola nuevamente stackoverflow! Quiero crear un diseño simple, con un ancho de menú de 200px, y el contenido div que toma el resto del ancho ... Pero ¿cómo puedo hacer eso?

Ya busqué en Google y en otros temas stackoverflow, pero no pude encontrar nada ...

Saludos

Editar: He intentado buscar en Goolge una vez más y me encontré con un ejemplo de la forma en que debe ser similar: http://www.thesitewizard.com

Pero debido a que tiene algunos nombres div poco extraño que no sé qué código se utiliza para lo div ...

Answer 1

Puede trabajar con el flotador en combinación con margen para lograr el resultado deseado. Para conseguir lo que quiere que su HTML-estructura debe ser similar a esto:

<div id="wrapper"> 
    <div id="menu">place your content here</div> 
    <div id="main">place your content here</div> 
</div> 

El mínimo CSS requerido debe tener este aspecto:

#menu { float: left; width: 200px; } 
#main { margin-left: 200px; } 

he añadido un demo on jsfiddle para mostrar los resultados con la ayuda de algunos colores de fondo.

Answer 2

puede utilizar

width:100%; 
padding-left:200px; 
float:right; 

para la #content y

width:200px; 
float:left; 
padding-left:-200px; 

para la #left

Answer 3

¿Qué hay de usar display:table, display:table-row, display:table-cell elementos?

jsFiddle aquí: jsFiddle

display: table es ahora compatible con todos los navegadores, por lo que en 2013, lo usaría esta

Answer 4

me sorprende que nadie ha respondido con CSS: flex en este punto

display:flex; 

Para un tutorial sobre todas las formas que puede utilizar esta propiedad, probar flexbox froggy