Foros del Web » Creando para Internet » CSS »

Divs al 100% de ancho

Estas en el tema de Divs al 100% de ancho en el foro de CSS en Foros del Web. Buenas, si tengo un div con 100% de ancho, y dentro un monton de divs con display:block (para crear los bordes con backgrounds) ¿Cómo meto ...
  #1 (permalink)  
Antiguo 06/06/2009, 10:11
 
Fecha de Ingreso: julio-2007
Mensajes: 62
Antigüedad: 10 años, 5 meses
Puntos: 0
Divs al 100% de ancho

Buenas, si tengo un div con 100% de ancho, y dentro un monton de divs con display:block (para crear los bordes con backgrounds)

¿Cómo meto dentro un div con ancho fijo y el otro que ocupe el resto?

He probado con esto, pero no funciona:

Código PHP:

.contenedor {
    
width:100%;
}
.
fijo {
    
width525px
    
height490px;
    
backgroundblack;
    
floatleft;
}
.
autom {
    
height490px;
    
margin0 0 0 500px;
    
backgroundgreen;
}



<
div class="contenedor">
    <
div class="fijo">
    </
div>

    <
div class="autom">
    </
div>
</
div
  #2 (permalink)  
Antiguo 06/06/2009, 10:31
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Divs al 100% de ancho

Y no te sería mas fácil poner un borde estándar y no complicarlo tanto? de todas formas no te acabo de entender del todo bien.
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 06/06/2009, 10:33
 
Fecha de Ingreso: julio-2007
Mensajes: 62
Antigüedad: 10 años, 5 meses
Puntos: 0
Respuesta: Divs al 100% de ancho

No se trata de poner una simple linea de borde, son bordes con imágenes:
una de superior, izquierda, abajo... etc. por lo que hay que hacerlo con fondos para crear un contenedor de un ancho definido con borde.
  #4 (permalink)  
Antiguo 06/06/2009, 10:37
 
Fecha de Ingreso: junio-2009
Ubicación: Mar del Plata
Mensajes: 33
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: Divs al 100% de ancho

Si mal no entiendo, quieres tener un div .contenedor que ocupe el 100% de la pantalla.

Y dentro de él, un div .fijo alineado a la izquierda, y otro div .autom alineado a la derecha.

Cierto?

Puedes hacerlo de esta manera:

Código:
.contenedor {
    width:100%;
    overflow: hidden;
}
.fijo {
    width: 525px; 
    height: 490px;
    background: black;
    float: left;
}
.autom {
    height: 490px;
    float: right;
    background: green;
}
Código:
<div class="contenedor">
    <div class="fijo">
    </div>

    <div class="autom">
    </div>
</div>
Fijate que marqué en negrita los cambios necesarios.

Con float: right lográs que el div se posicione a la derecha de su contenedor.

Vos le estabas poniendo margen a su izquierda, que no funciona porque el .div fijo se encontraba fuera del flujo del documento, por ser float: left

Al contenedor le puse overflow: hidden para que "contenga" a los 2 divs que tienen propiedad float.

Fijate si te sirve y decime.
  #5 (permalink)  
Antiguo 06/06/2009, 10:43
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Divs al 100% de ancho

También podrías ahcerlo con un div superior, luego uno con 3 columnas y uno inferior.
__________________
No diseñes usando tablas.
  #6 (permalink)  
Antiguo 06/06/2009, 10:44
 
Fecha de Ingreso: julio-2007
Mensajes: 62
Antigüedad: 10 años, 5 meses
Puntos: 0
Respuesta: Divs al 100% de ancho

No, esto no funciona.
Desaparecen los divs, sino recuerdo mal, cualquier div flotante necesita un tamaño especifico
  #7 (permalink)  
Antiguo 06/06/2009, 11:00
Avatar de tunait
Moderadora
 
Fecha de Ingreso: agosto-2001
Ubicación: Terok Nor
Mensajes: 16.805
Antigüedad: 16 años, 3 meses
Puntos: 380
Respuesta: Divs al 100% de ancho

Buenas

Pollito_69, he probado el código que dejas en el mensaje inicial y me funciona correctamente
__________________
Javascript Códigos - Bambú difunde
  #8 (permalink)  
Antiguo 06/06/2009, 11:04
 
Fecha de Ingreso: junio-2009
Ubicación: Mar del Plata
Mensajes: 33
Antigüedad: 8 años, 6 meses
Puntos: 1
Respuesta: Divs al 100% de ancho

Ahora que lo dice tunait, yo también lo probé y funciona.
  #9 (permalink)  
Antiguo 07/06/2009, 07:55
 
Fecha de Ingreso: julio-2007
Mensajes: 62
Antigüedad: 10 años, 5 meses
Puntos: 0
Respuesta: Divs al 100% de ancho

Ya lo he apañao, la culpa no era de esos divs sino de un "header" que puse encima
Gracias!
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 07:38.