Por que no se me ven solo estos divs?

claudiomacromediat1 · #1 (**permalink**) 02/04/2014, 14:16

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%;
}

TMeister · #2 (**permalink**) 02/04/2014, 14:35

1.-

Código HTML:

Ver original<div id="contenidos">
            <div id="izquierda"></div
            <div="derecha"></div>
        </div>

Hay un error ahí. Segundo contenidos no tiene altura.

claudiomacromediat1 · #3 (**permalink**) 02/04/2014, 15:56

Gracias pero a que te referis con altura? gracias de todas formas