Tres columnas

Buenas ...
Necesito realizar un diseño que va al 100%. Cómo puedo hacer un diseño a tres columnas donde las 2 primeras deben de tener un tamaño fijo y la tercera que es donde iría el contenido fuera líquida ocupando el resto de la pantalla sin importar la resolución ?

Hasta el momento lo tengo de esta forma:

Código :

#menu {
   background: #181818;
   width: 154px;
   height: 300px;
   float: left;
}
#subMenu {
   background: #1D1D1D;
   width: 154px;
   height: 300px;
   float: left;
}
#main {
   background: #212121;
   /*width: no se como;*/
   height: 300px;
   float: left;
}

Gracias ....¡¡¡

yo las pondria todas dentro de un div y le asigno a este div un position: relative; y luego a las tres columnas las poaiciono con position absolute...

algo asi:

Código :

#menu {

   background: #181818;

   width: 154px;

   height: 300px;

 position: absolute;

left: 10px;
 
top: 5px;

}

#subMenu {

   background: #1D1D1D;

   width: 154px;

   height: 300px;

 position: absolute;

left: 174px;
 
top: 5px;

}

#main {

   background: #212121;

   /*width: no se como;*/

   height: 300px;

 position: absolute;

left: 350px;
 
top: 5px;

}

asi ya nomas ajustas las distancias de left para que te queden bien y no junten ni se espacien mucho...

a ver de pronto seria esto.....

Código :

<div id="wrap">
   <div id="menu">
   </div>
   <div id="submenu">
   </div>
</div>

#wrap{
   position:relative;
   width:100%;
}
#menu{
  position:absolute;
  width:154px;
}
#submenu{
  position:absolute;
  width:300px;
  left:164px;
}

no se si esto funcione... es solo una idea

Gracias javier y buzu .... ya he encontrado una solución ...

Jossephb escribió:

Y la solución es?

Sabías que los foros (como este) fueron pensados para que la gente "comparta" la información? La idea es que publiques la solución que encontraste para que a alguien con el mismo problema le sirva.

Saludos.

siempre es bueno asignar un top, para evitar que el contenido quede muy pegado....

Si Ramm tienes mucha razón y gracias por recordarmelo ....
Pues esta es una solución y me ha servido:

CSS

Código :

#content {
   background: #212121 url(../imagenes/mainShadowUp.jpg) repeat-x top left;
   width: 100%;
   height: auto;
}
#menu {
   background: #181818 url(../imagenes/menuShadowUp.jpg) repeat-x top left;
   width: 154px;
   height: 800px;
   float: left;
}
#subMenu {
   background: #1D1D1D url(../imagenes/subMenuShadowUp.jpg) repeat-x top left;
   width: 154px;
   height: 800px;
   float: left;
}
#mainContent {
   width: 68%;
   height: 800px;
   float: left;
}
.pie {
   clear: both;
}

XHTML

Código :

<div id="content">
   <!-- MENÚ -->
   <div id="menu">
   </div>
   <!-- END MENÚ -->
   <div id="subMenu"></div>
   <div id="mainContent"></div>
   <div class="pie"></div>
</div>

Bueno y he hecho esto en el body para que cuando el usuario redimensione no se dañe el diseño:

Código :

body {
   margin: 0px;
   min-width: 1000px;
   max-width: 2200px;
   width: expression((documentElement.clientWidth || body.clientWidth) < 1020 ? "1000px" : ((documentElement.clientWidth || body.clientWidth) > 2220 ? "2200px" : "100%"));
}

Gracias ....