Foros del Web » Creando para Internet » CSS »

Div central ancho fijo, divs laterales líquidos.

Estas en el tema de Div central ancho fijo, divs laterales líquidos. en el foro de CSS en Foros del Web. 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. ...
  #1 (permalink)  
Antiguo 23/01/2014, 09:53
 
Fecha de Ingreso: enero-2014
Mensajes: 1
Antigüedad: 5 años, 9 meses
Puntos: 0
Pregunta Div central ancho fijo, divs laterales líquidos.

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.
  #2 (permalink)  
Antiguo 17/03/2014, 12:06
Avatar de fegm_4  
Fecha de Ingreso: febrero-2013
Mensajes: 114
Antigüedad: 6 años, 8 meses
Puntos: 8
Respuesta: Div central ancho fijo, divs laterales líquidos.

Puedes colocar un poco de tu código?
__________________
--
Aqui fegm_4
  #3 (permalink)  
Antiguo 18/03/2014, 11:49
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 10 años, 3 meses
Puntos: 19
Respuesta: Div central ancho fijo, divs laterales líquidos.

Cita:
Iniciado por fegm_4 Ver Mensaje
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?
  #4 (permalink)  
Antiguo 18/03/2014, 13:27
Avatar de andresgarciadev  
Fecha de Ingreso: junio-2013
Mensajes: 218
Antigüedad: 6 años, 4 meses
Puntos: 32
Respuesta: Div central ancho fijo, divs laterales líquidos.

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
  #5 (permalink)  
Antiguo 18/03/2014, 13:34
Avatar de mdk
mdk
 
Fecha de Ingreso: noviembre-2002
Mensajes: 531
Antigüedad: 17 años
Puntos: 11
Respuesta: Div central ancho fijo, divs laterales líquidos.

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>
__________________
SoY Lo Ke VeS iNKLuSo KuAnDo No Me VeS ;)
  #6 (permalink)  
Antiguo 18/03/2014, 14:56
Avatar de JuJoGuAl  
Fecha de Ingreso: julio-2009
Ubicación: Venezuela
Mensajes: 754
Antigüedad: 10 años, 3 meses
Puntos: 19
Respuesta: Div central ancho fijo, divs laterales líquidos.

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:
Ver original
  1. /*Esta capa contiene los 2 bordes y el Form de Inicio*/
  2. .logueo {
  3.     top: 0px;
  4.     left: 0px;
  5.     margin: 0px;
  6.     padding: 0px;
  7.     width: 100%;
  8.     height: 100%;
  9.     overflow: hidden;
  10. }
  11. #body_left{
  12.     position: relative;
  13.     height: 100%;
  14.     float: left;
  15.     width: -moz-calc(50% - 225px);
  16.     width: calc(50% - 225px);
  17.     background-image: url(../images/body_left.png);
  18.     background-repeat: no-repeat;
  19.     background-position: right top;
  20.     background-size: 87px 100%;
  21. }
  22. #body_center{
  23.     position: relative;
  24.     margin: 0px 50px;
  25.     float: left;
  26.     width: 350px;
  27.     height: 100%;
  28. }
  29. #body_right{
  30.     position: relative;
  31.     height: 100%;
  32.     float: left;
  33.     width: -moz-calc(50% - 225px);
  34.     width: calc(50% - 225px);
  35.     background-image: url(../images/body_right.png);
  36.     background-repeat: no-repeat;
  37.     background-position: left top;

Código HTML:
Ver original
  1. <div class="logueo">
  2.      <div class="logueo" id="img_ajax">
  3.                 <img src="images/ajax-loader.gif" border="0" alt="Cargando" title="Cargando" style="margin-top:95px;" />
  4.             </div>
  5.         <div class="body_left" id="body_left"></div>
  6.         <div class="body_center" id="body_center">
  7.             <div id="log_error">
  8.                 Usuario o Contrase&ntilde;a inv&aacute;lidos
  9.             </div>
  10.            
  11.             <div class="loginbox">
  12.                 <span>Iniciar sesi&oacute;n</span>
  13.                 <form name="login" id="login">
  14.                     <input name="username" id="username" class="status" value="Usuario" type="text"/>
  15.                     <input name="pass_txt" id="pass_txt" class="status" value="Contrase&ntilde;a" type="text"/>
  16.                     <input name="pass" id="pass" class="status" value="" type="password" style="display:none;" />
  17.                     <input value="Entrar" type="submit" class="btnlogin"/>
  18.                 </form>
  19.             </div>
  20.         </div>
  21.         <div class="body_right" id="body_right"></div>
  22.         <div style="clear: both;"></div>
  23.     </div>

Etiquetas: ancho, divs, fijo, tamaño
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas




La zona horaria es GMT -6. Ahora son las 15:34.