llevo días intentando maquetar una página en CSS; la estructura es simple, consta de un menú principal, debajo hay una caja con texto de introducción y aquí es donde tengo el problema, debajo necesito una estructura a dos columnas, una para títulos y la otra para descripciones, aquí les pongo el código:
Código :
<div id="master_animat"> <div id="menu"> <a href="#">Aigua</a> | <a href="#">Energia</a> | <a href="#">El planeta Terra</a> </div> <div id="txt_introduccio"> <h2>Texto Introducción</h2> <p>Texto</p> </div> <div id="continguts"> <div id="encabezado"> <div id="encabezado_titol"><p>Título</p></div> <div id="encabezado_descripcion"><p>Descripción</p></div> </div> <div class="activitat"> <div class="titol_activitat"><p>Nombre actividad.</p></div> <div class="descripcio_activitat"><p>Descripción actividad.</p></div> </div> </div> </div>
Y aquí van las CSS:
Código :
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.8em;
color:#06C;
}
#master_animat {
background-color:#9999FF;
position:relative;
width:70%;
margin:0px auto;
}
#menu {
background-color:#6C0;
margin:0px;
padding:5px;
text-align:center;
width:70%;
margin:0px auto;
}
#menu a {
margin:0px 20px;
text-decoration:none;
text-align:center;
}
#txt_introduccio {
background-color:#FFFFFF;
position:relative;
margin:0px;
}
#txt_introduccio h2 {
text-align:center;
font-size:1em;
font-weight:bold;
padding:5px;
margin:0px;
}
#txt_introduccio p {
text-align:justify;
color:#333333;
padding:10px 5px;
margin:0px;
}
#continguts {
position:relative;
}
#encabezado {
position:relative;
}
#encabezado_titol {
width:50%;
float:left;
}
#encabezado_descripcion {
width:50%;
float:left;
}
.activitat {
position:relative;
clear:both;
}
.titol_activitat {
width:50%;
float:left;
}
.descripcio_activitat {
width:50%;
float:left;
}El problema que tengo es que, cuando introduzco los "float", el cuadro general deja de abarcar el total de la estructura. No sé si el marcado que estoy usando es el más adecuado, pero no se me ocurre ninguna otra manera de simular dos columnas. Cualquier tipo de ayuda será bien recibida!
Muchas gracias y disculpad la extensión del mensaje!
