combinar px y % en un solo div

[elpabloncho]

es la primera vez que entro en este foro y no he perdido mucho rato en averiguar si esto ya esta resuelto asique disculpen si lo esta.

Mi problema es que quiero crear dos divs principales algo asi como tiene por ejemplo https://soundcloud.com/elpabloncho en la que podeis ver 3 divs principales, los 2 laterales de ancho fijo y el central se adapta al espacio sobrante. Lo intente dandole al div central margin:0px; por cada lado. si hubiera alguna forma de darle a un div un ancho en % y px al mismo tiempo asi como width:100% -500px; para restarle 500px al 100% seria mejor todavia.

[pzin]

Bienvenido a FdW.

Iniciado por elpabloncho

si hubiera alguna forma de darle a un div un ancho en % y px al mismo tiempo asi como width:100% -500px; para restarle 500px al 100% seria mejor todavia.

Haber hay:

Código CSS:

width: -webkit-calc(100% - 500px); /* Para que funcione en WebKit (Safari, Chrome, Opera(?)) */
width: calc(100% - 500px);
 

Aunque con algo así de simple te va bien:

Código HTML:

<section id="izquierda"></section>
<section id="derecha"></section>
<section id="contenido"></section>
 

Código CSS:

section#izquierda {
  float: left;
}
 
section#derecha {
  float: right;
}
 
section#izquierda,
section#derecha {
  width: 100px; 
}
 
section#contenido {
  margin: 0 100px;
}