Hacer que DIV ocupe todo el espacio disponible

[aguila_393]

Tengo dos divs dentro una div general, lo que quedaria asi:

Código HTML:

<div id="contenedor">
  <div id="menu">MENU </div>
  <div id="contenido">Contenido</div>
</div>
 

a menu y contenido lo puse como float left para que se pongan uno al lado del otro, a menu le di display inline para que se ajuste al texto, y lo que quiero hacer es que el div de contenido ocupe el resto del espacio que quede (el contenedor tiene espacio de 1000px).

Con que propiedad es que hago esto? No quiero darle un ancho de la cantidad de pixeles restantes (eso seria facil) quiero que se ajuste automaticamente.

[pzin]

¿Quieres que se ajuste horizontal o verticalmente?

[aguila_393]

Horizontalmente, aunque bueno si alguien sabe como ajustarlo verticalmente tambien estaria bueno, aunque supongo que poniendo min-height: 100% deberia ajustarse al alto del contenedor (quizas me equivoco, no lo probe).

[pzin]

Si flotas un elemento, no puedes ponerle un display:inline, ya que se computará como un elemento de bloque.

Puedes hacer algo así:

Código CSS:

.menu {
  float: left;
}
 
.contenido {
  overflow: hidden;
}
 

El elemento del contenido ocupará el resto. Pero claro, al no especificar ningún ancho en el menú, este se ajustará al texto, y si el texto es muy largo acabará ocupando casi toda la pantalla. Ahí ya sino indicas un ancho, puedes indicar un ancho máximo por ejemplo con max-width.

[aguila_393]

Iniciado por pzin

Si flotas un elemento, no puedes ponerle un display:inline, ya que se computará como un elemento de bloque.

Puedes hacer algo así:

Código CSS:

.menu {
  float: left;
}
 
.contenido {
  overflow: hidden;
}
 

El elemento del contenido ocupará el resto. Pero claro, al no especificar ningún ancho en el menú, este se ajustará al texto, y si el texto es muy largo acabará ocupando casi toda la pantalla. Ahí ya sino indicas un ancho, puedes indicar un ancho máximo por ejemplo con max-width.

Claro, al menu lo tengo con un max-width de 300px, y ahora al contenido le puse overflow hidden como dijiste y funciono, muchas gracias.