Estructura con DIV de ancho automático

[juandedios]

Bueno no se me ocurrió otro título la cosa es la siguiente, quiero hacer que mi página se divida en 2 columnas, la primera debe tener un ancho fijo y colocado a la izquierda, el segundo debe llenar el resto que queda en la derecha. El primero es sencillo:

Código CSS:

div#column-menu {
      width: 250px;
      height: 100%;
      float: left;
}
 
div#column-contenido {
      /* aquí es mi problema */
}
 

la cosa es que la página abarcará todo el ancho del navegador, entonces no se como hacer para que el div column-contenido, llene el resto del ancho de la página.

Espero que me hayan entendido y que me puedan ayudar.

Gracias.

[kseso?]

Pues ya lo tiene. Siempre y cuando aparezca en el html despues.

A lo que tiene, añádale una altura y un fondo y vea hasta donde llega su div de contenidos

[juandedios]

hice como dices pero me pinta todo el ancho de color que le pongo al segundo div.

Código CSS:

div#column-menu {
          width: 250px;
          height: 100%;
          float: left;
    }
     
    div#column-contenido {
          height: 500px;
          background-color: #FFF;
    }
 

[kseso?]

Cuál es su html?
<>menú lateral<>
<>contenidos<>
O a la inversa

[juandedios]

es:

Código HTML:

<div id = "column-menu"></div>
<div id = "column-contenido"></div>
 

[ugluck]

yo lo englobaba en un div mayor, y ten en quenta que deves calcular los espacios. en horizontal si no acotas el div se va a desborar y a meter debajo quando la ventana se haga pequenya.
html:

<div id ="colum-mother">
<div id = "column-menu"></div>
<div id = "column-contenido"></div>
</div>

css:
/* CSS Document */
body{margin:0; padding:0;}
#colum-mother{
position:relative;
margin: o auto;
width:1024px; height:100%; min-height:640px;
}
#column-menu {
position:relative;float: left;
width:250px;height: 100%; min-height:640px;
background-color:#099;
}

#column-contenido {
position:relative;float: left;
width:770px;height: 100%;min-height:640px;
background-color:#C00;
}

[juandedios]

Claro, eso si está bien, pero yo quiero usar todo el ancho de la pantalla teniendo sólo el div column-menu con ancho fijo y el otro que ocupe el resto del espacio de la derecha y con un ancho variable para que cuando la ventana se achique el div column-menu se mantenga fijo y que el otro solo varíe el ancho y el contenido obviamente se acomodaría.

Hay forma de hacerlo con CSS, otra forma que se me ocurrió es usar tablas para hacer la estructura principal, algo asi:

Código HTML:

<table width = "100%">
      <tr>
            <td width = "250"><!-- Contenido de column-menu --></td>
            <td><!-- Contenido de column-contenido --></td>
      </tr>
</table>
 

Pero yo no quiero usar tablas.

[kseso?]

De nuevo:
Si en el html aparece primero su menú sólo necesita flotarlo y darle una anchura.
El siguiente div si no lo limita declarando anchura ocupará todo el espacio sobrante. Es así por los valores y propiedades intrínsecas a cualquier elemento de bloque.
Otra cuestión es que tenga otros elementos/propiedades que lo impidan (y que nosotros desconocemos).
O quizás a lo que se refiere es a que queda un pequeño espacio libre entre sus div's y el body?
Si fuese eso, resete a Ø los margin

[ugluck]

Prueba con esto:

Código CSS:

body{margin:0; padding:0;}
#colum-mother{
position:relative;
margin: o auto; 
width:100%; height:640px;
}
#column-menu {
position:relative;float: left;
width:250px;height: 100%; min-height:640px;
background-color:#099;
}
 
#column-contenido {
position:absolute;float: left; top:0; margin-left:250px;
width:100%;height: 100%;
background-color:#C00;
}
 

[kseso?]

A priori y desconociendo prácticamente todo lo referente al proyecto de quien pregunta, no seré yo quien aconseje y crea que utilizar /absolute/ sea una buena idea.
Posíblemente sea el origen de múltiples efectos no deseados que necesitarán ser correjidos. Y no siempre será fácil.

[summaky]

Sólo es necesario hacerlo tal como dice Kseso?. Es extremadamente sencillo y cumple todo lo requerido.

Iniciado por kseso?

De nuevo:
Si en el html aparece primero su menú sólo necesita flotarlo y darle una anchura.
El siguiente div si no lo limita declarando anchura ocupará todo el espacio sobrante. Es así por los valores y propiedades intrínsecas a cualquier elemento de bloque.
Otra cuestión es que tenga otros elementos/propiedades que lo impidan (y que nosotros desconocemos).
O quizás a lo que se refiere es a que queda un pequeño espacio libre entre sus div's y el body?
Si fuese eso, resete a Ø los margin

Un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Sin título 1</title>
<style type="text/css">
* {
margin: 0; padding: 0; /* esto es un reset básico */
}
html, body {
width: 100%; height: 100%;
}
.menu {
width: 250px;
height: 100%;
float: left;
background-color: #ccc; /* fondo sólo para ver el efecto */
}
.contenido {
height: 100%;
background-color: #900; /* fondo sólo para ver el efecto */
}
</style>
</head>

<body>
<div class="menu">
<p>espacio para el menu</p>
</div>

<div class="contenido">
<p>espacio para el contenido</p>
<p>si haces un resize verás que siempre se mantiene la estructura igual</p>
</div>
</body>

</html>

El editor no me deja usar code.