hola a todos, estoy practicando una maquetacion sencilla, con una cabecera,debajo menu horizontal y luego una barra lateral y el cuerpo, pero tengo un problema con la barra lateral qiue al escribir un parrafo no sigue hacia abajo sino que sigue por debajo de la otra capa (cuerpo). aqui les dejo el codigo por silos quieren ver.
Código HTML:
<html>
<head>
<SCRIPT LANGUAGE="JavaScript">
function mostrarFechaHora()
{
var fecha
fecha=new Date();
document.write('Hoy es ');
document.write(fecha.getDate()+'/');
document.write((fecha.getMonth()+1)+'/');
document.write(fecha.getFullYear());
document.write('<br>');
document.write('Es la hora ');
document.write(fecha.getHours()+':');
document.write(fecha.getMinutes()+':');
document.write(fecha.getSeconds());
}
//Llamada a la función
</SCRIPT>
<style>
#cabecera {
background-color: green;
height:110px;
padding-left:15px;
}
#contenedor {
margin:0 auto;
width: 900px;
height: 100%;
}
#menu{
background-color:blue;
height:30px;
}
#cuerpo {
width:760px;
background-color: gray;
float:right;
//position:relative;
height:100%;
}
#pie {
background-color: blue;
clear: both;
}
#lateral {
background-color: orange;
float:left;
width:140px;
height:100%;
text-align:left;
}
#listm ul, li {
display: inline;
list-style-type: none;
}
#listm{
margin:0px;
}
#listm ul{
width:900px;
}
#listm li {
//background-image: url("sep_menu.gif");
//background-position: left center;
//background-repeat: no-repeat;
float: left;
margin-left: 10px;
margin-right: 0px;
padding-left: 10px;
width: 140px;
font-size:14px;
}
#listm a{
display:block; //Convertimos el vínculo en un bloque.
width:80px;
height:30px;
padding-top:0px;
text-decoration:none;
text-align:center;
font-size:22px;
color:#FFFFFF;
//background-color:#B2B2B2;
}
#listm a:hover{
background-color:orange;
}
#reloj{
width:130px;
height:33px;
float:right;
}
</style>
</head>
<body>
<div id="contenedor">
<div id="cabecera">Este es la cabecera
<div id="reloj"><script LANGUAGE="JavaScript">mostrarFechaHora();</script> </div>
</div>
<div id="menu">
<ul id="listm">
<li><a href="#">Home</a></li>
<li><a href="#">Quienes somos</a></li>
<li><a href="#">Servicios</a></li>
<li><a href="#">Contacto</a></li>
</ul>
</div>
<div id="lateral"><p>wwvgnrtkbrbhghghghgjbgfbrgr</p> </div>
<div id="cuerpo">cuerpo</div>
</div>
</body>
<html>