Hola gente el div "contenidos" no se ve! desde css le di color blue y width 70% pero nada, y el footer me queda afuera del div "contenedor principal" (el que agrupa a todos los elementos) por que me esta pasando esto?
aca el codigo HTML
Código:
[<!DOCTYPE HTML>
<html lang="es">
<head>
<title>MI WEB EN PORCENTAJES</title>
<meta name="description" content="Mi web en porcentajes"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="css/estilos.css"/>
</head>
<body>
<div id="contenedor-principal">
<div id="head">
<h1>Banner</h1>
</div>
<nav>
<ul>
<li>
<div class="contenedor-general">
<div class="contenedor-uno">
<p class= "texto_uno">Inicio</p>
</div>
<div class="contenedor-dos">
<p class= "texto_dos">Inicio</p>
</div>
</div>
</li>
<li>
<div class="contenedor-general">
<div class="contenedor-uno">
<p class= "texto_uno">Videos</p>
</div>
<div class="contenedor-dos">
<p class= "texto_dos"><a href="http://youtube.com">Videos</a></p>
</div>
</div>
</li>
<li>
<div class="contenedor-general">
<div class="contenedor-uno">
<p class= "texto_uno">Nosotros</p>
</div>
<div class="contenedor-dos">
<p class= "texto_dos">Nosotros</p>
</div>
</div>
</li>
<li>
<div class="contenedor-general">
<div class="contenedor-uno">
<p class= "texto_uno">Tutoriales</p>
</div>
<div class="contenedor-dos">
<p class= "texto_dos">Tutoriales</p>
</div>
</div>
</li>
<li>
<div class="contenedor-general">
<div class="contenedor-uno">
<p class= "texto_uno">Contacto</p>
</div>
<div class="contenedor-dos">
<p class= "texto_dos">Contacto</p>
</div>
</div>
</li>
</ul>
</nav>
<div id="contenidos">
<div id="izquierda"></div
<div="derecha"></div>
</div>
<footer>
FOOTER
</footer>
</div>
</body>
</html>
y aca les dejo el css:
Código:
*{
margin: 0px;
padding: 0px;
text-decoration: none;
}
#contenedor-principal{
background-color: red;
width: 70%;
height: 900px;
margin: 5% auto;
}
#head{
background-color: brown;
width: 100%;
height: 20%;
}
nav{
background-color: green;
max-width: 100%;
height: 40px; /* o 6 por ciento aprox*/
position: absolute;
z-index: 5;
visibility: visible;
}
ul{
list-style: none;
width: 1000px;
height: 40px; /* o 6 por ciento aprox*/
}
li{
float: left;
width: 200px;
height: 40px;
background-color: red;
overflow: hidden;
margin-top: 0px;
}
div.contenedor-general:hover{
margin-top: -40px;
overflow: hidden;
}
div.contenedor-general{
width: 300px;
height: 80px;
background-color: yellow;
-webkit-transition: margin-top .2s;
overflow: hidden;
}
div.contenedor-uno{
width: 200px;
height:40px;
background-color: blue;
overflow: hidden;
}
div.contenedor-dos{
width: 200px;
height:40px;
background-color: green;
overflow: hidden;
}
p.texto_uno, p.texto_dos{
text-align: center;
margin-top: 10px;
color: white;
}
#contenidos{
background-color: blue;
width: 700px;
}
footer{
background-color: orange;
width: 70%;
}