Problema con divs de ancho fijo y variable

LauRiTa-C · #1 (**permalink**) 13/11/2010, 18:34

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

angelAparicio · #2 (**permalink**) 14/11/2010, 07:56

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

Código HTML:

Ver original<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>Pruebas</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        div {
        border: 1px solid transparent;
        padding: 0;
        margin: 0;
        }
        
        .rojo {
            width: 210px;
            float: right;
            background-color: red;
        }
        
        .contenedor { 
        }
        
        .azul {
            width: 100%;
            margin-left: -210px;    
            background-color: blue;
        }
        
        .sub_contenedor {
            width: 100%;
            margin-left: -210px;
        }
        
        .gris {
            background-color: gray;
            width: 100%;
            float: left;
            margin-left: -323px;
        }
        
        .verde {
            background: green;
            width: 315px;
            float: right;
        }       
        
 
    </style>
  </head>
  <body>
    
<div class="contenedor-grande">
 
    <div class="rojo">
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
    </div> 
    
 
    <div class="contenedor">
     
            
        <div class="azul">
            <p>&nbsp;</p>
            <p>&nbsp;</p>
            <p>&nbsp;</p>
        </div>
        
        
        <div class="sub_contenedor">
            
            <div class="gris">
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
            </div>
    
            <div class="verde">
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
                <p>&nbsp;</p>
            </div>
            
        </div>
        
        
    </div>   
 
 
</div>
    
  </body>
</html>

C2am · #3 (**permalink**) 14/11/2010, 09:02

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<body>
 
<div class="contenedor-grande">
 
 
      <div class="rojo">
   
    </div> 
    
   <div class="contenedor">
        
        <div class="azul">
     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
        </div>
        <div class="verde">
      
        </div>
        <div class="gris">
        
        </div>
    
        
     </div>               
   
                 
  
</div>
</body>

Código CSS:

Ver original*{ padding:0; margin:0;}
.contenedor-grande{
    position: relative;
    width:100%;
}
.contenedor {
    position:relative;
    margin-right:210px;
}
.azul {
    background-color:#00F;
    float: left;
    width:100%;
}
.gris {
    width:auto;
 
    background-color: #CCC;
}
.verde {
    width:315px;
    float:right;
    overflow:hidden;
    background-color: #6C6;
}
 
.rojo {
    width:210px;
    overflow:hidden;
    float:right;
    background-color: #C03;
}

LauRiTa-C · #4 (**permalink**) 14/11/2010, 11:11

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

C2am · #5 (**permalink**) 14/11/2010, 11:30

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.

LauRiTa-C · #6 (**permalink**) 14/11/2010, 12:18

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!!!!!!!!

C2am · #7 (**permalink**) 14/11/2010, 12:34

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

LauRiTa-C · #8 (**permalink**) 14/11/2010, 16:14

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!!!!

LauRiTa-C · #9 (**permalink**) 22/11/2010, 04:07

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.