Toma posiciones en internet

Columna de ancho fijo en html adaptable

Publicado por el sábado, 13 de agosto de 2011.

Para el primer artículo de la sección de diseño he optado por explicar como poder crear en una plantilla en html de dos columnas que se adapte a la anchura del navegador pero manteniendo siempre una de esas columna del mismo tamaño.

Para hacer esta demostración nos vale con una página html muy básica que recoja el esqueleto de la plantilla.

<div class="extensible">
	<div class="columnaIzda"></div>
</div>
<div class="columnaDcha"></div>

A continuación, en el código que correspondería a la hoja de estilos que tendremos que aplicar a nuestra plantilla, determinaremos una anchura de 350 pixels para la columna de la derecha. Para hacer que la columna izquierda quede a su misma altura y además se adapte a la pantalla tendremos que crear un div que anide a esta última y con un margen igual al tamaño de la columna derecha. Esto lo hacemos para que siempre nos respete esa distancia y evitar así que el texto invada zonas que no queremos. Se ve más claro viendo la hoja de estilos.

.columnaIzda{ padding:0px 0px 0px 300px; }
.columnaDcha{ width:300px; padding:0px 0px 0px 0px; float:right; }
.extensible{ width:100%; margin:0px 0px 0px -300px; float:left; }

Categoria: diseño. Etiquetas: maquetacion, css.

Comentarios

Código antispam: seo8672

© 2010. Desarrollado por mí.