Div central ancho fijo, divs laterales líquidos.

[Maldo10]

Soy nuevo en este foro y lo primero me gustaría saludaros a todos y felicitaros por este magnífico foro.

Y aquí mi pregunta en cuestión.
Tras mucho investigar en internet y muchos intentos fallidos no he conseguido hacer lo siguiente.
Tener un div situado en la izquierda con una anchura mínima, un div en el centro con una anchura fija y un div en la derecha con una anchura mínima.
Hasta ahí todo bien. El problema es que no consigo que los divs laterales aumenten su tamaño al disponer de más anchura en pantalla; y cuando consigo que esto pase, el div central no se sitúa en el centro de la pantalla y por consiguiente los divs laterales no se encuentran "anclados" al punto que deseo


http://imgur.com/z6wsY8u

En la imagen muestro en la parte izquierda la organización de los divs en tamaño mínimo y en la parte derecha el resultado que busco y no consigo.
Debajo de los divs hay una tabla cuyas divisiones de celda coinciden con los div laterales y a cuyos puntos no consigo "anclar" los divs laterales cuando consigo que respondan al tamaño de ventana.

Espero haberme explicado bien y muchas gracias por vuestra atención.

[fegm_4]

Puedes colocar un poco de tu código?

[JuJoGuAl]

Iniciado por fegm_4

Puedes colocar un poco de tu código?

Precisamente quiero hacer eso y he logrado esto:

http://www.forosdelweb.com/f53/posic...-otra-1094486/

Puedes ayudarme?

[andresgarciadev]

pues..... primero te recomiendo q no uses float para esos casos... bastaria con display:inline-block;
bueno y lo que podrias hacer es darle como dices al div del centro un ancho fijo como 500px y con los otros lo que puedas hacer es usar calc() de css

[mdk]

Toma este ejemplo rápido y sencillo, en el que en el div central le he puesto un ancho de 400px, por lo que en los divs laterales le restaría 200 en cada lado. Así el div central será siempre de 400px y los laterales adaptarán al ancho de la pantalla.

Código:

<style>
#contenedor, body {
	top: 0px;
	left: 0px;
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.left {
	position: relative;
	height: 100px;
	float: left;
	width: -moz-calc(50% - 200px);
	width: calc(50% - 200px);
	background-color: red;
}
.center {
	position: relative;
	height: 100px;
	float: left;
	width: 400px;
	background-color: green;
}
.right {
	position: relative;
	height: 100px;
	float: left;
	width: -moz-calc(50% - 200px);
	width: calc(50% - 200px);
	background-color: blue;
}
</style>
<div id="contenedor">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
	<div style="clear; both"></div>
</div>

[JuJoGuAl]

Siguiendo la ayuda de mdk Hice esto y me funciono perfectamente, luche con la posicion del fondo pero ya di con el blanco:

Código CSS:

/*Esta capa contiene los 2 bordes y el Form de Inicio*/
.logueo {
    top: 0px;
    left: 0px;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#body_left{
    position: relative;
    height: 100%;
    float: left;
    width: -moz-calc(50% - 225px);
    width: calc(50% - 225px);
    background-image: url(../images/body_left.png);
    background-repeat: no-repeat;
    background-position: right top;
    background-size: 87px 100%;
}
#body_center{
    position: relative;
    margin: 0px 50px;
    float: left;
    width: 350px;
    height: 100%;
}
#body_right{
    position: relative;
    height: 100%;
    float: left;
    width: -moz-calc(50% - 225px);
    width: calc(50% - 225px);
    background-image: url(../images/body_right.png);
    background-repeat: no-repeat;
    background-position: left top;
 

Código HTML:

<div class="logueo">
     <div class="logueo" id="img_ajax">
                <img src="images/ajax-loader.gif" border="0" alt="Cargando" title="Cargando" style="margin-top:95px;" />
            </div>
        <div class="body_left" id="body_left"></div>
        <div class="body_center" id="body_center">
            <div id="log_error">
                Usuario o Contrase&ntilde;a inv&aacute;lidos
            </div>
           
            <div class="loginbox">
                <span>Iniciar sesi&oacute;n</span>
                <form name="login" id="login">
                    <input name="username" id="username" class="status" value="Usuario" type="text"/>
                    <input name="pass_txt" id="pass_txt" class="status" value="Contrase&ntilde;a" type="text"/>
                    <input name="pass" id="pass" class="status" value="" type="password" style="display:none;" />
                    <input value="Entrar" type="submit" class="btnlogin"/>
                </form>
            </div>
        </div>
        <div class="body_right" id="body_right"></div>
        <div style="clear: both;"></div>
    </div>