[SOLUCIONADO] Problemas con un DIV en un include

fegm_4 · #1 (**permalink**) 07/08/2013, 17:28

Buenas noches a todos,
Actualmente me encuentro trabajando en la maqueta de mi sitio web pero me he encontrado con un problema bastante incómodo. Soy nuevo en esto por lo que necesito de su ayuda para poder solventarlo.

En la pagina inicial, debo hacer referencia a una tabla de productos. Mi pagina index.php tiene la siguiente forma:

Código PHP:

Ver original<?php include('connections/conn.php')?>
<?php require('templates/header.php'); ?>
<?php include('products.php')?>
<?php require('templates/footer.php'); ?>

Donde la pagina header.php es de la siguiente forma:

Código HTML:

Ver original<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Documento sin título</title>
<head>
<link href="css/estilo.css'" rel="stylesheet">
</head>
 
<body>
<div id = "container">
    <div id = "header">
        <div class="uppermenu">
            <span>Bienvenido #nombre_de_usuario</span>
            <a href="#" class="uppermenu">Cerrar sesi&oacute;n</a>
            <a href="#" class="uppermenu">Mi Perf&iacute;l</a>
        </div>
        <img src="img/logo.png'" alt="logo" class="logo" />
        <div id="cssmenu"> 
        <?php include('templates/menu/menu.php'); ?>
        </div>
        
    </div> 
    <div id = "content">

y la pagina footer.php tiene la siguiente forma:

Código HTML:

Ver original</div>
 
</div>
<div id = "footer">
    <p>Mi tienda virtual</p>
</div>
</body>
</html>

La pagina products.php solamente me arroja una tabla de productos disponibles. El archivo de estilos es el siguiente:

Código CSS:

Ver original@charset "utf-8";
@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
 
body {
    margin: 0;
    padding: 0;
    color: #000;
    font-size: 12px;
    background-color: #DADADA;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
}
 
#container{
    width:900px;
    background-color: #FFF;
    margin: 0 auto;
    
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
    -webkit-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
        -moz-box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
 
 
#header{
    width: 900px;
    height: 110px;
    float: left;
    position: inherit;
}
 
.logo{
    height: 60px;
    width: 86px;
    margin: 10px;
 
}
 
.uppermenu{
    width:100%;
    height:20px;
    float: right;
    font-size: 12px;
    background: #2E3E5E;
    color: #CBCBCB;
}
 
.uppermenu span{
    padding-left: 5px;
}
 
.uppermenu a{
    display:block;
    float: right;
    width: 100px;
    text-align: center;
    text-decoration: none;  
}
 
.uppermenu a:hover{
    color: #FFF;
    background-color: #168AE3;
    cursor: pointer;
}
 
...
 
 
#content{
    width: 900px;
    height: auto;
    padding-top: 50px; 
    float: left;
    position:inherit;
    /*min-height:628px;*/
}
 
#footer{
    margin: 0 auto;
    width: 900px;
    height:30px;
}
 
#footer p{
    text-align:center;
    font-size: 9px;
    color: #999;
}

Ahora bien, cuando corro la pagina inicial, el container no me aparece. No hay fondo blanco y es como si no existiera. He probado de todo con los position y hasta ahora no he podido dar con el error. Solamente ha funcionado cuando establezco un min-height, pero solo se muestra el fondo blanco hasta esa altura mínima especificada.

Agradezco mucho quien pueda ayudarme con este incoveniente ya que llevo varios días tratando de avanzar, pero esto me tiene detenido.

fegm_4 · #2 (**permalink**) 07/08/2013, 19:12

¡Lo he solucionado! Espero que esta respuesta les funcione. Se solucionó colocando display: table; en las propiedades del id container

pzin · #3 (**permalink**) 07/08/2013, 19:46

El problema ocurre porque todos los elementos hijos del contenedor están flotados. Las soluciones para eso, suelen ser tres:

Añadir un elemento vacío al final y limpiar los flotados con clear: both
Especificar overflow: hidden (o scroll) en el propio contenedor
Usar micro-clearfix: http://nicolasgallagher.com/micro-clearfix-hack