La solución que yo le doy en esos casos es la siguiente:
dentro del archivo HTML agrego un nuevo div que no contine absolutamete nada bajo el <div id="menu"></div>, cuya propiedad css es la de clear: both; y Listo con ese div me ayuda a separar y a que no se traslapen unos con otros.
<body>
<div id="global">
<div id="cabecera">De mis primeros divs en html goods</div>
<div id="navegacion">Barra de Navegacion</div>
<div id="contenido">
<div id="menu">
<ul>
Home
About Us
Contact Us
Gallery
</div>
Este sera el contenido principal de mi pagina
</div>
<div id="aux"></div>
<div id="pie">Aqui sera el final de mi pagina </div>
</div>
</body>
/*CSS*/
*{
margin:0px;
padding:0px;
border:0px;
}
body{
text-align:center;
}
#cabecera {
background-color: pink;
}
#navegacion{
background-color:gray;
}
#contenido{
background-color:orange;
/*width:800px;
float:left;*/
}
#aux{
clear: both;
}
#pie{
background-color:brown;
}
#global{
width:800px;
margin:4px auto; /*Margen del elemento arriba y abajo 4px--- a los costados es auto*/
}
#menu{
background-color:yellow;
width:150px;
float:left;
text-align:left;
}
#menu li{
list-style:none;
}
dentro del archivo HTML agrego un nuevo div que no contine absolutamete nada bajo el <div id="menu"></div>, cuya propiedad css es la de clear: both; y Listo con ese div me ayuda a separar y a que no se traslapen unos con otros.
<body>
<div id="global">
<div id="cabecera">De mis primeros divs en html goods</div>
<div id="navegacion">Barra de Navegacion</div>
<div id="contenido">
<div id="menu">
<ul>
</div>
Este sera el contenido principal de mi pagina
</div>
<div id="aux"></div>
<div id="pie">Aqui sera el final de mi pagina </div>
</div>
</body>
/*CSS*/
*{
margin:0px;
padding:0px;
border:0px;
}
body{
text-align:center;
}
#cabecera {
background-color: pink;
}
#navegacion{
background-color:gray;
}
#contenido{
background-color:orange;
/*width:800px;
float:left;*/
}
#aux{
clear: both;
}
#pie{
background-color:brown;
}
#global{
width:800px;
margin:4px auto; /*Margen del elemento arriba y abajo 4px--- a los costados es auto*/
}
#menu{
background-color:yellow;
width:150px;
float:left;
text-align:left;
}
#menu li{
list-style:none;
}