dos divs: uno fijo, otros estiran

Question

que estoy tratando de lograr esto:

Pero estoy teniendo problemas para conseguir los dos divs medias a jugar bonito. Si los configuro a un número relativo (30% y 70%), "funciona", pero el div izquierdo cambia de tamaño a medida que el usuario cambia el ancho de las ventanas del navegador.

#floatitleft{width:30%; float:left;} 
#floatitright{width:70%; float:left;} 

Lo que quiero decir, como ilustra la imagen

#floatitleft{width:300px; float:left;} 
#floatitright{width:100%; float:left;} 

Pero esto hace que "floatitright" para terminar por debajo de floatitleft. Y si lo configuro al 70%, termina a la derecha de "floatitleft" pero a medida que cambio el tamaño del navegador un poco, termina debajo de nuevo. ¿Qué hacer?

ACTUALIZACIÓN: Finalmente terminé con:

#topper{ 
    height:100px; 
    width:100%; 
    background-color:blue; 
} 
#wrapperz{ 
    height:inherit; 
    width:100%; 
} 
#wrapperz p{margin:0 0 0 0px; padding:10px 10px 0px 10px; color:#0F0F0F;} 
#wrapperz #floatitleft{ 
    width:300px; 
    float:left; 
} 
#wrapperz #floatitright{ 
    margin-left: 300px; 
    min-width:300px; 
} 
#bottommer{ 
    height:100px; 
    width:100%; 
    background-color:red; 
} 

que se utilizaría como:

<div id="topper"> 
test 
</div> 

<div id="wrapperz"> 

<div id="floatitleft"> 
<p> Stuff </p> 
</div> 

<div id="floatitright"> 
<p> Stuff </p> 
</div> 

<div style="clear: both;"/> 

</div> <!-- Close Wrapper --> 

<div id="bottommer"> 
test 
</div> 

Tenga en cuenta que esto no es HTML propiamente dicho, sino que sólo sirve como la solución a mi ejemplo. Además, el "div style =" clear: both "es especialmente importante si intentas esto porque no usarlo ahorra el pie de página al estropearlo ya que el envoltorio no se estira correctamente verticalmente. Pero Mark me ha proporcionado lo que creo será mejor alternativa/limpiador a continuación.

Answer 1

¿No funcionaría como estaba previsto?

#floatitleft{ 
    width:300px; 
    float:left; 
} 
#floatitright{ 
    margin-left: 300px; 
} 

Answer 2

que puede lograr que muy fácil sistema de red utilizando.

http://960.gs/

echar un vistazo, se puede elegir un 12 o 16, 24 o incluso más columnas. Sólo use clases como "grid_4", "grid_8" dependiendo del ancho que necesite.

Answer 3

Aquí, hice un duplicado de la imagen: jsbin.com/ipexep/3 (haga clic en "editar en jsbin" en la parte superior derecha para ver y editar el código fuente)

I para la altura de las secciones superior e inferior, tomé la altura para ellos que pones en la imagen.

Nota: Lo hice haciendo que cada sección se posicione completamente y establezca sus atributos superior, inferior, izquierdo o derecho en consecuencia.

Además, observe que mi método coincidirá con cada tamaño de pantalla. Lo estiré en todas las áreas donde no especificaste una dimensión. (excepto que el encabezado y el pie de página necesitaban una dimensión de altura, así que adiviné porque no especificaste)