Foros del Web » Creando para Internet » CSS »

Layout izquierda, centro y derecha...

Estas en el tema de Layout izquierda, centro y derecha... en el foro de CSS en Foros del Web. Tengo un problema con un layout, tengo un div de dimensión fija de 750 px, y dentro de ese div tengo otros tres div, los ...
  #1 (permalink)  
Antiguo 15/05/2006, 09:19
 
Fecha de Ingreso: marzo-2005
Mensajes: 103
Antigüedad: 12 años, 9 meses
Puntos: 1
Layout izquierda, centro y derecha...

Tengo un problema con un layout, tengo un div de dimensión fija de 750 px, y dentro de ese div tengo otros tres div, los 3 tienen float a la izquierda, y quedan horizontalmente alineados:

.___________________________
|.............|..............|.............|
|.............|..............|.............|
|..DIV 1....|...DIV 2...|...DIV 3...|
|.............|..............|.............|
|.............|..............|.............|
.-------------------------------

quisiera que el div 2 se expandiera 100% si el div 3 falta, ya que el div 1 y 3 deberían tener dimensiones fijas..pero el div 2 no, el div 2 se debería ajustar al espacio restante, pero si le pongo al div 2 un width de 100% entonces me corre el DIV 3 hacia abajo.
Me podrían ayudar con el Layout en CSS? y si no entienden pregúntenme, gracias.

::alex::
  #2 (permalink)  
Antiguo 15/05/2006, 10:07
 
Fecha de Ingreso: octubre-2005
Mensajes: 35
Antigüedad: 12 años, 1 mes
Puntos: 0
Existe una manera de hacer 3 columnas como tu quieres, aquí hay un buen tutorial:

Tres columnas en desarrollo web
Aquí te dice cómo hacerlo fluido también.

Tres columnas en desarrollo web (Otra manera)

Un saludo
  #3 (permalink)  
Antiguo 15/05/2006, 11:30
 
Fecha de Ingreso: marzo-2005
Mensajes: 103
Antigüedad: 12 años, 9 meses
Puntos: 1
Ok, muchas gracias, pero en ese diseño las 3 columnas tienen un width... osea que si quitas la de la derecha la del medio no se reajustará al espacio vacío, no sé si me entiendo... de todas maneras...gracias por el buen recurso que me diste!

::alex::
  #4 (permalink)  
Antiguo 15/05/2006, 18:59
Avatar de Jesusguevarautomotri  
Fecha de Ingreso: enero-2006
Ubicación: Puerto Ordaz, Estado Bolivar
Mensajes: 106
Antigüedad: 11 años, 10 meses
Puntos: 0
Aqui hay otros links que espero te ayuden.

Cita:
Iniciado por mbavio
En Internet hay millones de recursos para aprender a hacer layouts a dos o tres columnas.

http://blog.html.it/layoutgala/ (ya hechos)

http://css.maxdesign.com.au/floatutorial/ (los ultimos dos tutoriales enseñan esto)

Espero que te sirvan. Saludos
__________________
jesusguevarautomotriz
Industria Automotriz de Venezuela - blog
Internet al dia - blog
  #5 (permalink)  
Antiguo 16/05/2006, 03:55
 
Fecha de Ingreso: octubre-2005
Mensajes: 35
Antigüedad: 12 años, 1 mes
Puntos: 0
En los enlaces de Jesusguevarautomotri tampoco lo soluciona. (los cuales, por cierto, son muy buenos)

Parece que lo que tu quieres hacer sólo se puede hacer de esta manera mas o menos:

En caso de que esté la tercera columna:

#principal{
margin-left: 170px;
background-color: #ffffff;
padding: 4 4 4 4px;
margin-right: 130px;
}

En caso de que no esté

#principal_alt{
margin-left: 170px;
background-color: #ffffff;
padding: 4 4 4 4px;
width: 100%;
}

Y cambiar el nombre del div en el html. Ya se que es una solucion poco elegante. Pero si la página es php no te costará demasiado y si vas a modificarlas a mano no te cuesta nada cambiarlo.
  #6 (permalink)  
Antiguo 16/05/2006, 09:53
 
Fecha de Ingreso: abril-2005
Mensajes: 29
Antigüedad: 12 años, 7 meses
Puntos: 0
Hola:

Cuando el div 2 crece, inevitablemente empuja hacia abajo el div 3 porque no hay nada que lo contenga.

¿Intentaste utilizar una tabla de 3 columnas y darle el ancho al TD?

por ejemp:

Cita:
<table id="table" cellSpacing="0" cellPadding="0" width="750px" border=1>
<tr>
<td width="10%"><div>contenido1</div></td>
<td width="100%"><div>contenido2</div></td>
<td width="10%"><div>contenido3</div></td>
</tr>
</table>
__________________
www.softimus.net
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




La zona horaria es GMT -6. Ahora son las 20:17.