Foros del Web » Creando para Internet » CSS »

3 Columnas Flotantes PX, %, PX

Estas en el tema de 3 Columnas Flotantes PX, %, PX en el foro de CSS en Foros del Web. Buenos dias a todos =) miren tengo un DIV contenedor podriamos llamarlo DIV.contenedor, luego dentro de este DIV voy a colocar 3 DIV flotantes osea ...
  #1 (permalink)  
Antiguo 13/08/2011, 08:30
Avatar de syslock64  
Fecha de Ingreso: septiembre-2009
Mensajes: 19
Antigüedad: 7 años, 5 meses
Puntos: 1
Pregunta 3 Columnas Flotantes PX, %, PX

Buenos dias a todos =) miren tengo un DIV contenedor podriamos llamarlo DIV.contenedor, luego dentro de este DIV voy a colocar 3 DIV flotantes osea pegados como 3 columnas horizontales pegadas, =) okis hasta aki todo bien, el problema es cuando yo quiero poner estas medidas 1ero width=250px, 2do width=%(todo lo k pueda ocupar), 3ero width=250px

algo asi:
Código:
<div style="display:block;width:100%">
	<div style="display:block;float:left;width:230px"></div>
	<div style="display:block;float:left">
	COntenido resizable, dependiendo del ancho de pantalla 
	</div>
	<div style="display:block;float:right;width:230px"></div><div style="clear:both"></div>
</div>
Pues como veran si ponemos mas contenido en el div del medio... el DIV k esta al lado derecho... se va superponiendo el 2do encima del 3ero. o lo va bajando...

Como puedo hacer para k respete las columnas de los 2 lados y el medio sea PORCENTUAL?

espero haberme explicado bien amigos, gracias de ante mano =)
  #2 (permalink)  
Antiguo 13/08/2011, 20:12
Avatar de syslock64  
Fecha de Ingreso: septiembre-2009
Mensajes: 19
Antigüedad: 7 años, 5 meses
Puntos: 1
Sonrisa Respuesta: 3 Columnas Flotantes PX, %, PX

Bueno me auto respondo... la solucion que encontre es utilizando tablas u.u!! bueno se k esta fuera de ser DIVS pero por ahora lo trabajare asi...


Código HTML:
Ver original
  1. <table style="width:100%">
  2. <tr>
  3. <td style="width:250px">xD</td>
  4. <td>asdasd</td>
  5. <td style="width:250px">asdsa</td>
  6. </tr>
  #3 (permalink)  
Antiguo 13/08/2011, 20:31
Avatar de andresdzphp
Colaborador
 
Fecha de Ingreso: julio-2011
Ubicación: $this->Colombia;
Mensajes: 2.749
Antigüedad: 5 años, 8 meses
Puntos: 793
Respuesta: 3 Columnas Flotantes PX, %, PX

Es que si te pasas del total del ancho se te bajan los div, tienes que manejar el ancho exacto y es más fácil con sólo porcentajes yo creo...

Código CSS:
Ver original
  1. #izq,#der,#cen {
  2.         float: left;
  3.     }
  4.    
  5.     #contenedor {
  6.         width: 100%;
  7.     }
  8.    
  9.     #izq {
  10.         width: 20%;
  11.     }
  12.    
  13.     #cen {
  14.         width: 60%;
  15.     }
  16.    
  17.     #der {
  18.         width: 20%;
  19.     }

Código HTML:
Ver original
  1. <div id="contenedor">
  2.        
  3.         <div id="izq">izq</div>
  4.         <div id="cen">cen</div>
  5.         <div id="der">der</div>
  6.        
  7.     </div>
__________________
Si sabemos como leer e interpretar el manual será mucho más fácil aprender PHP. En lugar de confiar en ejemplos o copiar y pegar - PHP
  #4 (permalink)  
Antiguo 13/08/2011, 21:01
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 2 meses
Puntos: 306
Respuesta: 3 Columnas Flotantes PX, %, PX

Una forma de controlar eso es pensar en como el navegador armará la página.
Luego piensas así:
1º que se dibuje la columna de ancho fijo : izquierda o derecha
2º que se dibuje la otra columna de ancho fijo: derecha o izquierda.
Entonces ahora, que ya están ubicadas las dos columnas de ancho fijo viene el tercer paso:
3º que se dibuje la columna de ancho variable igual al ancho que dejen disponibles las columnas fijas.

Código HTML:
Ver original
  1. <!-- Nota: como son div (elementos de bloque) no hace falta poner display:block -->
  2. <div style="width:100%; overflow:hidden (o auto)"><!-- con overflow evitas poner el div vacio que limpia los float -->
  3.        
  4.         <div style="float:left; width:230px; background-color:#C06">
  5.          Caja con ancho fijo a la izquierda
  6.         </div>
  7.        
  8.         <div style="float:right;width:230px; background-color:#0CC">
  9.         Caja con ancho fijo a la derecha
  10.         </div>
  11.        
  12.         <div style="background-color:#060">
  13.         Como ya se han posicionado las cajas fijas, esta caja quedara ubicada en el espacio libre que dejen las anteriores.
  14.  
  15. Los background son solamente para ver la disposición.
  16.         </div>
  17.        
  18.        
  19.        
  20.        <!--  <div style="clear:both"></div>  -- ya no hace falta gracias al overflow en la caja padre -->
  21. </div>

Aclaración: como verás la ultima caja no es flotante, y debes considerar el tema de las alturas de las cajas. Prueba dandole alturas diferentes y veras a que me refiero. Para controlar mas o menos ese tema usa min-heigth y max-heigth.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 13/08/2011 a las 21:08
  #5 (permalink)  
Antiguo 14/08/2011, 08:56
Avatar de syslock64  
Fecha de Ingreso: septiembre-2009
Mensajes: 19
Antigüedad: 7 años, 5 meses
Puntos: 1
Respuesta: 3 Columnas Flotantes PX, %, PX

Oh! Genial si tienes razon jejje Muchisimas gracias C2am es lo k estuve buscando... ahora solo me falta k los divs a ambos lados ocupen el 100% de alto =) voy a ir viendo y leyendo. Muchas gracias de nuevo. =)
  #6 (permalink)  
Antiguo 14/08/2011, 09:13
Avatar de syslock64  
Fecha de Ingreso: septiembre-2009
Mensajes: 19
Antigüedad: 7 años, 5 meses
Puntos: 1
De acuerdo Respuesta: 3 Columnas Flotantes PX, %, PX

Amigo encontre la solucion es un pequeño truco pero es tan necesario que sin el los DIVS no podrian tomar el 100% de la altura de la pantalla o dispositivo =)

CODIGO CSS:
Código HTML:
Ver original
  1. <style type='text/css' media='all'>
  2. *{padding:0;margin:0}
  3. html, body { height: 100%; }


CODIGO XHTML
Código HTML:
Ver original
  1. <div style="width:100%;height:100% "><!-- con overflow evitas poner el div vacio que limpia los float -->
  2.        
  3.         <div style="float:left; width:230px; background-color:#C06;height:100%">
  4.         Caja con ancho fijo a la izquierda
  5.          
  6.         </div>
  7.        
  8.         <div style="float:right;width:230px; background-color:#0CC;height:100%">
  9.         Caja con ancho fijo a la derecha
  10.         </div>
  11.        
  12.         <div style="background-color:#060">
  13.         <div >
  14.         Como ya se han posicionado las cajas fijas, esta caja quedara ubicada en el espacio libre que dejen las anteriores.
  15.  
  16. Los background son solamente para ver la disposición.
  17.         </div>
  18.         </div>
  19.        
  20.        
  21.        <!--  <div style="clear:both"></div>  -- ya no hace falta gracias al overflow en la caja padre -->
  22. </div>

espero pueda servirle a muchos que quiza no sabian el trukito jeje =) muchas gracias a todos =). Caso cerrado!

Etiquetas: ancho, columnas, contenido, flotantes
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 08:00.