Buenas.
Estoy haciendo un diseño con un cabecero, tres columnas (izquierda, centro-contenido y derecha) y un pie de página. Todo bién hasta que al meterle en la zona del contenido unos parrafos me deplaza hacia arriba las capas de izquierda y derecha y a su vez el encabezado viene hacia abajo
, todo eso en Firefox y Opera.
Aquí dejo las muestras la primera sin meter los <p></p>
Sin parrafos
Y la segunda con los parrafos <p></p>, que como verán hace que se desplacen las capas.
Con parrafos
El código es el siguiente:
Código HTML:
<style type="text/css">
body{margin:0px;
padding:0px;
}
#cabecero{position:absolute;
left:0px;
background-color:#999900;
width:100%;
height:100px;}
#menu{position:absolute;
left:0px;
top:100px;
width:150px;
background-color:#006666;
}
#contenido{
position:relative;
top:100px;
background:#666;
margin-left: 149px;
margin-right:129px;
voice-family: "\"}\"";
voice-family: inherit;
margin-left: 151px;
margin-right:131px;
}
html>body #contenido {
margin-left: 151px;
margin-right:131px;
}
#lateralderecho{
position:absolute;
right:0px;
top:100px;
width:130px;
background-color:#ccc;
}
#pie{position:absolute;
bottom:0px;
width:100%;
background-color:#FFCC66;}
</style>
</head>
<body>
<div id="cabecero">
Cabecero
</div>
<div id="menu">
<ul>
<li>Apartamentos</li>
<li>Pisos</li>
<li>Estudios</li>
<li>Adosados</li>
<li>Casas</li>
<li>Chalets</li>
<li>Parcelas</li>
</ul>
</div>
<div id="contenido">
<p>Apartamento</p>
<p>Localización Urbaniz. Los Alamos</p>
<p>Superficie 80 m2</p>
<p>Dormitorios 3</p>
<p>Baños 1</p>
<p>Aseos </p>
<p>Patios</p>
<p>Garaje comunitario</p>
<p>Precio 150,00 €</p>
</p>Características Apartamento muy luminoso, totalmente amueblado, estilo rústico,
con zonas verdes, parking y piscina comunitaria, muy buena comunicación.
Cercano al Parque comercial "Las Marismas"</p><img src="fotos/prueba1.jpg" />
</div>
<div id="lateralderecho">1
</div>
<div id="pie">Pie
</div>
</body>
¿Estoy haciendo algo mal?