Foros del Web » Creando para Internet » CSS »

Problema con divs de ancho fijo y variable

Estas en el tema de Problema con divs de ancho fijo y variable en el foro de CSS en Foros del Web. hola! resulta que tengo un problema con unos divs que me están dando bastante la lata, y ya empiezo a desesperarme... he creado una imagen ...
  #1 (permalink)  
Antiguo 13/11/2010, 18:34
Avatar de LauRiTa-C  
Fecha de Ingreso: marzo-2008
Mensajes: 9
Antigüedad: 9 años, 9 meses
Puntos: 0
Problema con divs de ancho fijo y variable

hola!

resulta que tengo un problema con unos divs que me están dando bastante la lata, y ya empiezo a desesperarme...

he creado una imagen para explicar mejor lo que trato de obtener:



en la zona azul me da igual el ancho que lleve...

el caso es que he empezado por crear un div contenedor para todo, que lleve a su vez otro contenedor que lleve dentro el azul, con el gris y el verde debajo, y luego a la derecha que flotase el rojo. esa era la idea, y parecía fácil, pero no lo es.

en el html puse:

Código:
<div class="contenedor-grande">
	<div class="contenedor">
		
        <div class="azul">
        hola
        </div>
		
        <div class="gris">
    	hola
    	</div>
    
    	<div class="verde">
        hola
        </div>
                    
    </div>   
                 
    <div class="rojo">
    hola
    </div> 
</div>


y en el css:

Código:
.azul {background-color:#00F}
.gris {float:left; width:100%; margin-right:-315px;}
.verde { width:315px; float:left; overflow:hidden;}

esto lo envuelvo con:

Código:
.contenedor { float:left;width:100%; margin-right:-210px;}

y le meto el rojo:
Código:
.rojo { width:210px;  overflow:hidden; float:left;}


pero nada, no hay manera de que me salga lo que pongo en la imagen... he probado de mil maneras y me estoy volviendo locaaaaa


a ver si alguien puede echarme un cable
  #2 (permalink)  
Antiguo 14/11/2010, 07:56
Avatar de angelAparicio  
Fecha de Ingreso: julio-2009
Ubicación: Sevilla
Mensajes: 307
Antigüedad: 8 años, 5 meses
Puntos: 22
Respuesta: Problema con divs de ancho fijo y variable

Prueba con este código. He añadido otro div para contener a gris y verde:

Código HTML:
Ver original
  1. <!DOCTYPE html
  2.  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3.  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  5.   <head>
  6.     <title>Pruebas</title>
  7.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8.     <style type="text/css">
  9.         div {
  10.         border: 1px solid transparent;
  11.         padding: 0;
  12.         margin: 0;
  13.         }
  14.        
  15.         .rojo {
  16.             width: 210px;
  17.             float: right;
  18.             background-color: red;
  19.         }
  20.        
  21.         .contenedor {
  22.         }
  23.        
  24.         .azul {
  25.             width: 100%;
  26.             margin-left: -210px;   
  27.             background-color: blue;
  28.         }
  29.        
  30.         .sub_contenedor {
  31.             width: 100%;
  32.             margin-left: -210px;
  33.         }
  34.        
  35.         .gris {
  36.             background-color: gray;
  37.             width: 100%;
  38.             float: left;
  39.             margin-left: -323px;
  40.         }
  41.        
  42.         .verde {
  43.             background: green;
  44.             width: 315px;
  45.             float: right;
  46.         }      
  47.        
  48.  
  49.     </style>
  50.   </head>
  51.   <body>
  52.    
  53. <div class="contenedor-grande">
  54.  
  55.     <div class="rojo">
  56.         <p>&nbsp;</p>
  57.         <p>&nbsp;</p>
  58.         <p>&nbsp;</p>
  59.         <p>&nbsp;</p>
  60.         <p>&nbsp;</p>
  61.         <p>&nbsp;</p>
  62.         <p>&nbsp;</p>
  63.         <p>&nbsp;</p>
  64.         <p>&nbsp;</p>
  65.         <p>&nbsp;</p>
  66.         <p>&nbsp;</p>
  67.         <p>&nbsp;</p>
  68.         <p>&nbsp;</p>
  69.     </div>
  70.    
  71.  
  72.     <div class="contenedor">
  73.      
  74.            
  75.         <div class="azul">
  76.             <p>&nbsp;</p>
  77.             <p>&nbsp;</p>
  78.             <p>&nbsp;</p>
  79.         </div>
  80.        
  81.        
  82.         <div class="sub_contenedor">
  83.            
  84.             <div class="gris">
  85.                 <p>&nbsp;</p>
  86.                 <p>&nbsp;</p>
  87.                 <p>&nbsp;</p>
  88.                 <p>&nbsp;</p>
  89.                 <p>&nbsp;</p>
  90.                 <p>&nbsp;</p>
  91.                 <p>&nbsp;</p>
  92.                 <p>&nbsp;</p>
  93.                 <p>&nbsp;</p>
  94.             </div>
  95.    
  96.             <div class="verde">
  97.                 <p>&nbsp;</p>
  98.                 <p>&nbsp;</p>
  99.                 <p>&nbsp;</p>
  100.                 <p>&nbsp;</p>
  101.                 <p>&nbsp;</p>
  102.                 <p>&nbsp;</p>
  103.                 <p>&nbsp;</p>
  104.                 <p>&nbsp;</p>
  105.                 <p>&nbsp;</p>
  106.             </div>
  107.            
  108.         </div>
  109.        
  110.        
  111.     </div>  
  112.  
  113.  
  114. </div>
  115.    
  116.   </body>
  117. </html>
__________________
Mis webs:
- Programador Web Autónomo
- Conciertos en Sevilla
  #3 (permalink)  
Antiguo 14/11/2010, 09:02
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Problema con divs de ancho fijo y variable

Organizando mejor los div y la hoja de estilos no hace falta agregar un nuevo contenedor.
Solo hay que considerar el orden en que van apareciendo las cajas.
Dentro del contenedor-grande:
1º La caja roja que estará flotada a la derecha y que tiene un ancho fijo.
2º La caja contenedora, que no tendrá flotado, pero sí un margen derecho igual a la caja roja.
La roja debe ir primero porque la otra no tiene un ancho definido.(*)

Ya dentro de la caja contenedora:
1º La caja Azul que como ocupa todo el ancho de la caja padre no es necesario que este flotada.
2º La caja verde flotada a la derecha con ancho fijo, de manera que la caja siguiente se ubique en el espacio que queda a su izquierda.
3º La caja gris que se posicionara a la izquierda de Verde.
La verde debe ir primero porque la otra no tiene un ancho definido. (idem que *)


Código HTML:
Ver original
  1.  
  2. <div class="contenedor-grande">
  3.  
  4.  
  5.       <div class="rojo">
  6.    
  7.     </div>
  8.    
  9.    <div class="contenedor">
  10.        
  11.         <div class="azul">
  12.      hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola  hola holaholaholahola
  13.         </div>
  14.         <div class="verde">
  15.      
  16.         </div>
  17.         <div class="gris">
  18.        
  19.         </div>
  20.    
  21.        
  22.      </div>              
  23.    
  24.                  
  25.  
  26. </div>
  27. </body>


Código CSS:
Ver original
  1. *{ padding:0; margin:0;}
  2. .contenedor-grande{
  3.     position: relative;
  4.     width:100%;
  5. }
  6. .contenedor {
  7.     position:relative;
  8.     margin-right:210px;
  9. }
  10. .azul {
  11.     background-color:#00F;
  12.     float: left;
  13.     width:100%;
  14. }
  15. .gris {
  16.     width:auto;
  17.  
  18.     background-color: #CCC;
  19. }
  20. .verde {
  21.     width:315px;
  22.     float:right;
  23.     overflow:hidden;
  24.     background-color: #6C6;
  25. }
  26.  
  27. .rojo {
  28.     width:210px;
  29.     overflow:hidden;
  30.     float:right;
  31.     background-color: #C03;
  32. }
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 14/11/2010 a las 10:30
  #4 (permalink)  
Antiguo 14/11/2010, 11:11
Avatar de LauRiTa-C  
Fecha de Ingreso: marzo-2008
Mensajes: 9
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Problema con divs de ancho fijo y variable

hola de nuevo
muchisimas gracias por responder

a ver, os cuento...

probando lo que dice angelAparicio, con algunos retoques, me ha quedado todo mas o menos bien, salvo el gris, que se desplaza a la izquierda sobresaliendo del template... mirad una captura:




el codigo que usé:

Código:
<div class="contenedor-grande">
	<div class="contenedor1">
		
        <div class="azul">
        hola
        </div>
		<div class="contenedor2">
        <div class="gris">
    	hola
    	</div>
    
    	<div class="verde">
        hola
        </div>
           </div>         
    </div>   
                 
    <div class="rojo">
    hola<br />hola<br />hola<br />
    </div> 
</div>


Código:
.contenedor-grande{width:980px;}
.contenedor1 { float:left;width:100%; margin-right:-210px;}
.contenedor2 {width: 100%;margin-left: -210px;}
.azul {background-color:blue;}
.gris {float:left; width:100%; margin-right:-315px; background-color:grey;overflow:hidden;}
.verde { width:315px; float:left; overflow:hidden; background-color:green;}
.rojo { width:210px;  overflow:hidden; float:right; background-color:red;}



y luego, probé con la solución que propone C2am y se ve todo perfecto, pero en cuanto quito contenido de la columna roja, la gris debería espandirse, en cambio se queda en el sitio, y sigue el hueco en blanco que deja el rojo

  #5 (permalink)  
Antiguo 14/11/2010, 11:30
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Problema con divs de ancho fijo y variable

Cita:
..y luego, probé con la solución que propone C2am y se ve todo perfecto, pero en cuanto quito contenido de la columna roja, la gris debería espandirse, en cambio se queda en el sitio, y sigue el hueco en blanco que deja el rojo

Bueno, pero ahí estas cambiando las condiciones iniciales.
Y el hueco en blanco queda porque le estas diciendo al "contenedor" que deje un margen derecho de x pixeles.
Quitale simplemente el div contenedor y que todos queden dentro del contenedor-grande.

Pero repito no es la consulta inicial. Cada situación tiene sus particularidades.
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--
  #6 (permalink)  
Antiguo 14/11/2010, 12:18
Avatar de LauRiTa-C  
Fecha de Ingreso: marzo-2008
Mensajes: 9
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Problema con divs de ancho fijo y variable

disculpa, quiza estuve equivocada y no me expresé bien al principio, pero es lo que queria decir con la primera imagen. cuando decia ancho variable para el gris me refería a que si faltaba contenido en el rojo o en el verde, el gris ocupase ese espacio.

con tablas me resultó muy fácil hacerlo, pero con divs se me atraganta. lo de quitarle el contenedor ya lo habia intentado, y de esa manera funciona perfecto siempre y cuando no haya contenido en el rojo... porque en cuanto le metes algo, se desplaza hacia arriba junto con el gris.



y la verdad es que tampoco termino de entender muy bien por qué en el html el rojo debe ir primero

creo que de tantas horas luchando con esto me está afectando a las neuronas!!!!!!!!
  #7 (permalink)  
Antiguo 14/11/2010, 12:34
Avatar de C2am  
Fecha de Ingreso: enero-2009
Ubicación: Rosario, Argentina
Mensajes: 2.005
Antigüedad: 8 años, 10 meses
Puntos: 306
Respuesta: Problema con divs de ancho fijo y variable

En realidad en la consulta inicial teniendo dentro del contenedor-grande:
1- contenedor
2-caja roja

La roja va primero porque si pones primero la "contenedor" al no tener un ancho definido ocupa todo el ancho de la caja padre (contenedor-grande) y luego la roja, evidentemente, quedaría debajo y no al lado tal como querías.
Lo mismo ocurre entre la caja gris y la verde.
Prueba a cambiar de posicion en el html y verás lo que digo.

No entendí lo que decias de que si el rojo tenia contenido el gris se desplaza o algo así
Te muestro unas capturas:
Con contenido en el rojo y mucho contenido en el gris


Sin rojo:


PD: no había visto las imagenes en tu post, pero me da la impresión que algo no está tal como te lo pasé, algo haz cambiado.
Puedes quitarle el width a la caja azul y tal vez aplicarle un float:left; a ver que resulta
__________________
El mundo nada puede contra un hombre que canta en la miseria.
-- Ernesto Sábato--

Última edición por C2am; 14/11/2010 a las 12:42
  #8 (permalink)  
Antiguo 14/11/2010, 16:14
Avatar de LauRiTa-C  
Fecha de Ingreso: marzo-2008
Mensajes: 9
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Problema con divs de ancho fijo y variable

muchisimas gracias C2am

justo lo que te salió a tí en esas capturas era lo que yo buscaba, pero no me salía con el código que pusiste en tu post anterior.... tuve que quitarle el float left al azul y ahora sí ha funcionado perfectamente.

ahora voy a tratar de integrarlo en mi plantilla. es justo lo que necesitaba.
además ya entendí lo del orden de los divs!
gracias una vez más!!!!
  #9 (permalink)  
Antiguo 22/11/2010, 04:07
Avatar de LauRiTa-C  
Fecha de Ingreso: marzo-2008
Mensajes: 9
Antigüedad: 9 años, 9 meses
Puntos: 0
Respuesta: Problema con divs de ancho fijo y variable

hola de nuevo
tengo una ultima pregunta ya que despues de testearlo me he dado cuenta de que no funciona con el maldito ie6, se ve así
http://img24.imageshack.us/img24/2037/ejemplo5m.png

y me pregunto si seria posible hacerlo compatible con ese navegador. yo lo intenté con otra hoja de estilos aparte pero lo máximo que conseguí fue igualar la altura de la capa gris y la verde, pero siguen por debajo de la roja.

Etiquetas: ancho, fijo, variables
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 13:01.