Maquetación CSS (2)

var MargenH = 80; var MargenV = 64;
var ELM = (document.getElementById);
var IE5 = ((ELM) && (navigator.userAgent.toLowerCase().indexOf('msie')!=-1) && !(window.opera));
if (IE5) window.onresize=Dimensionar;
function Dimensionar () {
document.getElementById('CentradaSL').style.width = (document.body.clientWidth-2*MargenH)+'px';
document.getElementById('CentradaSL').style.height = (document.body.clientHeight-2*MargenV)+'px';
}

Ejemplo: Caja centrada (margen sólido-contenido líquido).

Caja centrada en horizontal (contenido sólido)

Antes de pasar a otros modelos, podemos detenernos en un caso parecido, como puede ser el de centrar sólo en horizontal una caja de ancho fijo. Es un modelo que tradicionalmente se ha venido haciendo insertando el contenido en una tabla, y esta a su vez en un div alineado y también en un obsoleto elemento center. La solución es tremendamente sencilla, con un solo elemento:

<div id="CentradaHS">... contenido de la caja... </div>

div#CentradaHS { width:400px; margin:auto; }

Sin embargo, y una vez más, Internet Explorer parece no reconocer la declaración CSS. Para conseguir lo mismo, podemos recurrir a una ligera artimaña, basada precisamente en otro error de interpretación:

<div id="Contenedora">
 <div id="CentradaHS">... contenido de la caja... </div>
</div>

div#Contenedora { width:100%; text-align:center; }
div#CentradaHS { width:400px; margin:auto; text-align:left; }

La declaración text-align:center no debería tener efecto sobre la colocación del bloque interior, sino sobre sus elementos en línea, pero este nuevo fallo de implementación nos permite simular el comportamiento correcto. Obsérvese que hay que corregir la alineación real en la segunda regla.

Ejemplo: Caja centrada en horizontal (contenido sólido).

Usuarios que han visto este tema también han visto...

- Espacios en blanco con CSS
- Cambiar el color de los enlaces
- Barra de desplazamiento a medida en CSS
- CSS para campos textarea de formulario
- Insertar una imagen de fondo en un TEXTAREA

- Versión imprimible de este documento

- Enviar por e-mail este documento