Capa al 50%

[wigglyUtrera]

Hola, tengo este codigo XHTML:

Código HTML:

<div id="barra">
	<div id="barra_izq">asdf</div>
	<div id="barra_der">adsf</div>
</div> 

y el CSS:

Código HTML:

#barra{
width:100%;
}
#barra_izq{
width:50%;border:1px solid red;
}
#barra_der{
width:50%;border:1px solid red;
}

Los bordes estan puesto para ver como se colocan.

quiero que se vea asi:

|start_Izq end_Izq | start_Der end_der |

es decir, que #barra_izq ocupa el 50% de la pagina, y #barra_der el otro 50%

y ahora mismo se ve asi:

|start_Izq end_Izq |
|start_Der end_der |


Saludos

[emiliodeg]

o usas
#barra_izq{
float:left;width:50%;border:1px solid red;
}
#barra_der{
float:left;width:49%;border:1px solid red;
}
o utilizas posicionamiento absoluto para uno en top:0;left:0;y para el otro top:0;right:0;

[wigglyUtrera]

gracias emiliodeg, funciona perfecto.

Lo que no entiendo es xq flotando los dos a la izquierda funciona...y xq ese 49%...



Saludos

[demiurgo_daemon]

Hola,

se flotan porque <div> es un elemento de bloque; significa que aunque le des un ancho definido, se "reserva" el resto de la pantalla. Lo del 49% es porque el ancho que defines no incluye bordes; en otras palabras: si defines width: 50% para ambos, en realidad su ancho será de 50% + 1px (por el borde). En este caso, el total será de 100% + 2px, que forzozamente se desborda.

saludos

[demiurgo_daemon]

Iniciado por demiurgo_daemon

Hola,

se flotan porque <div> es un elemento de bloque; significa que aunque le des un ancho definido, se "reserva" el resto de la pantalla. Lo del 49% es porque el ancho que defines no incluye bordes; en otras palabras: si defines width: 50% para ambos, en realidad su ancho será de 50% + 1px (por el borde). En este caso, el total será de 100% + 2px, que forzosamente se desborda.

saludos

[wigglyUtrera]

Totalmente aclarado, gracias demiurgo_daemon



Saludos