Problema con div contenedor

juanta · #1 (**permalink**) 22/04/2009, 17:12

Estimados Amigos:

Tengo el siguiente problema: resulta que tengo un div contenedor con un color de fondo y dentro de el 2 divs mas, uno para el contenido y el otro un sidebar. El contenido y sidebar se ven bien pero el contenedor no se muestra este es mi codigo html:

Código HTML:

<body>
	<div id="page">
		<div id="header">
			<h1><a href="index.php">Mi Aplicacion</a></h1>
			<div id="h_bar">
				<span class="b_welcome">Bienvenid@ </span>
			</div>
		</div>
		<div id="main_content">
			<div id="content">
				<?php include_once('contenido.php'); ?>
			</div>
			<div id="sidebar">
				<?php include_once('menu.php'); ?>
			</div>
		</div>
		<div id="footer">
			
		</div>
	</div>
</body>

Y este es mi codigo Css de contenedor:

Código:

#main_content {
	padding: 10px;
	height: auto;
}

#content {
	display: block;
	position: relative;
	width: 550px;
	float: left;
	background-color: #fff;
	border: 1px solid #444;
	margin-right: 10px;
}

#sidebar {
	display: block;
	position: relative;
	width: 200px;
	float: right;
	background-color: #fff;
	border: 1px solid #444;
}

Desde ya muchas gracias por sus aportes.

Saludos.

willyfc · #2 (**permalink**) 22/04/2009, 17:25

no estoy seguro de si es esto lo que quieres, pero el page no existe entonces trata de tomar todo el ancho del navegador, el main_content no tiene ancho definido tampoco ni color de fondo, tampoco se repetirá por que no le has dicho que lo haga ya que tiene un alto en auto, espero esto sirva de guía:

Código html:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<style type="text/css">
#page{width:764px; margin:0 auto;}
#main_content {
    width:764px;
    padding: 10px;
    height: auto;
    overflow:auto;
    background:#CCCCCC;
}
 
#content {
    width: 550px;
    float: left;
    background-color: #fff;
    border: 1px solid #444;
    margin-right: 10px;
}
 
#sidebar {
    width: 200px;
    float: right;
    background-color: #fff;
    border: 1px solid #444;
}
.footer{clear:both; width:750px; height:20px; background:#000;}
</style>
</head>
 
<body>
    <div id="page">
        <div id="header">
            <h1><a href="index.php">Mi Aplicacion</a></h1>
            <div id="h_bar">
                <span class="b_welcome">Bienvenid@ </span>
            </div>
        </div>
        <div id="main_content">
            <div id="content">
                <?php include_once('contenido.php'); ?>
            </div>
            <div id="sidebar">
                <?php include_once('menu.php'); ?>
            </div>
        </div>
        <div id="footer">
            
        </div>
    </div>
</body>
</html>

juanta · #3 (**permalink**) 23/04/2009, 07:48

Muchas Gracias por tu respuesta Willyfc.

Si la verdad es que no pase todo el codigo css donde defino los estilos para page y otros elementos, pero si que me ayudaste.... la propiedad que me hacia falta el el

Código:

overflow: auto;

Muchas gracias por tu ayuda.....por cualquier cosa a tu disposicion....

Saludos cordiales....