Plantillas CSS

thejorgo · #1 (**permalink**) 24/07/2008, 04:24

Hola! muy buenas.

Estoy intentando crear una plantilla CSS para aplicar a mi sitio web usando CSS.

El diseño sería típico:

Cabecera, Contenido con dos columnas y Pie.

Gracias a los trucos que leí por aquí conseguí poner el pie siempre pegado a la parte inferior del navegador. Pero siguiendo esta regla no consigo que el contenido central de las dos columnas también estire su altura hasta el pie que tengo abajo del todo.

¿Alguna idea? Espero haberme explicado bien.

Muchas gracias!

Raulmmmm · #2 (**permalink**) 24/07/2008, 08:27

Pon las dos columnas dentro de un div llamado "estirar" por ejemplo, y pon esto en el CSS:

Código:

#estirar { overflow: hidden; }
#columnauno, #columnados { margin-bottom: -3000px; padding-bottom: 3000px; }

#3 (**permalink**) 28/07/2008, 05:16

pues a mi sólo me funciona en el ie7

Raulmmmm · #4 (**permalink**) 28/07/2008, 14:06

Un pequeño detalle del clear:both, ya está solucionado y funciona en IE y Firefox:

Código HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<title>Dos columnas misma altura</title>
<style type="text/css">
#contenedor { overflow: hidden; }
#menu { float: left; width: 15%; background: #eee; margin-bottom: -3000px; padding-bottom: 3000px; }
#texto { float: left; width: 85%;  margin-bottom: -3000px; padding-bottom: 3000px; }
.clear { clear: both; }
</style>
</head>
<body>
<div id="contenedor">
<div id="menu">
Este es el menú
</div>
<div id="texto">
Este es el texto<br />
Hola
</div>
<div class="clear"></div>
</div>
</body>
</html>

Mikmoro · #5 (**permalink**) 28/07/2008, 16:06

Te ha pasado como me suele pasar a mi, que te has dejado el title del ejemplo anterior en este, que no tiene nada que ver.

Un detalle: siempre veo que con el corte recomiendas añadir el div <div style="clear: both"></div> y siempre pienso lo mismo, que para mi es preferible quitar los estilos de las etiquetas, por eso al contrario yo recomiendo siempre el div <div class="corte"></div> y el css .corte {clear: both;}. Cuesta algo más explicarlo, pero creo que es mejor, ¿no?

Raulmmmm · #6 (**permalink**) 29/07/2008, 00:33

¡Anda, el title

! Gracias por decírmelo. Y en cuanto a eso, yo lo tengo como dices tú, pero no me suele apetecer explicarlo

. A ver si ya me pongo las pilas.

Mikmoro · #7 (**permalink**) 29/07/2008, 01:31

Cita:

Iniciado por Raulmmmm

Y en cuanto a eso, yo lo tengo como dices tú, pero no me suele apetecer explicarlo

. A ver si ya me pongo las pilas.

Sabía que era pereza

Me voy a pegar la explicación en un archivo en algún sitio y así será copy & paste