 Necesito hacer dos div del mismo tamaño de forma automatica
Ayuda con CSS, necesito hacer dos div del mismo tamaño de forma automatica.
Como referencia pueden ver mi maqueta por favor: [URL="http://inacra2010.webcindario.com/"]http://inacra2010.webcindario.com/[/URL] en esta maqueta el problema es lo que he pintado de rojo la idea es que se haga mas grande degun el contenido pero no logro lo que necesito, para que se vea eso rojo tube que colocar un min-height:150px;  , este es un div que contiene otros dos(div wrapper con tiene sidebar y contenedor).
aqui esta el html: nombre index.php
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>::: --- Página Oficial del Instituto Nacional de Apopa ::: ---</title>
<link href="css/styles.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div id="encabezado"><!--Inicio encabezado-->
<div id="logo"><!--Inicio logo-->
Instituto Nacinal de Apopa
</div><!--Fin lgo-->
<div id="navi"><!--Inicio menu-->
<?php include_once('menu.php');?>
</div><!--Fin menu-->
<div id="search"><!--Inicio buscador-->
<form action="resultados.php" method="get" name="cse-search-box" id="cse-search-box" target="_blank" class="form_search">
<div><input type="hidden" name="cx" value="014367080511235769642:etzgzhey51i" /> <input type="hidden" name="cof" value="FORID:10" /> <input type="hidden" name="ie" value="UTF-8" /> <input type="text" name="q" size="22" /> <input type="submit" name="sa" value="Buscar en Google" /></div>
</form>
<script type="text/javascript" src="http://www.google.com/cse/brand?form=cse-search-box&lang=es">
</script>
</div><!--Fin buscador-->
<div id="frases"><!--Inicio frases-->
FRases
</div><!--Fin frases-->
</div><!--Fin encabezado-->
<div id="wrapper">
<div class="sidebar"><!--Inicio sidebar-->
<div class="widget">
Widget
</div>
<div class="widget">
Widget
</div>
<div class="widget">
Widget
</div><!--Fin sidebar-->
</div>
<div class="contenedor"><!--Inicio contenedor-->
<div class="contenido_principal">
<h1>Titulo 1 </h1>
<p>Mensaje de Bienvenida. En este sitio encontrarás toda la información actualizada sobre el instituto, un poco de historia, presente y futuro..Es un sitio muy sencillo pero que contiene la información suficiente para que lo conozcas. Si eres alumno actual, ex alumno, empleado, ex-empleado o amigo de la institución te identificaras con muchas de las actividades que aca se detallan. Fotos o evidencias de eventos realizados en la institución, encontrarás desde los años de 2000 para acá, puesto que en años anteriores no se tenían los recursos con los que ahora se cuentan. Asi que si tienes fotos o clips de videos antiguos y quieres que se coloquen en este sitio, solo debes comunicarte con nosotros.</p>
<br />
</div>
</div>
</div>
<div id="footer">
2010 - <?php echo date('Y')?> - Web Master Gustavo López.<br />
Todos los derechos reservados || .
</div>
</body>
</html>
este es el CSS: nombre styles.css
Código:
/*INICIO RESET CSS*/
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: text-bottom;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body { line-height: 1; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
/*FIN RESET CSS*/
body{ background-color:#8BD8CE}
.clear{ clear:both; width:10px; }
#encabezado{ width:900px; height:200px; background-color:#CCCCCC; margin:auto; }
#logo{ width:90%; background-color:#0066FF; height:140px; margin:auto; }
#navi{ width:65%; background-color:#00FFCC; height:60px; float:left;}
/*menu*/
#menu {text-align: center;
font-size: 0.7em;
width: 600px;
margin:13px 0px 0px 8px;
}
#menu ul {list-style-type: none;
}
#menu ul li {width: 140px;
}
#menu ul li.nivel1 { float: left;
margin-right: 1px;
}
#menu ul li a {display: block;
text-decoration: none;
color: #fff;
background-color: #399;
border: solid 1px #fff;
padding: 7px;
position: relative;
}
#menu ul li a.nivel2, #menu ul li a.nivel2ie {color: #000;
}
#menu ul li a.nivel1, #menu ul li a.nivel2 {display: block!important;display: none;
position: relative;
}
#menu ul li:hover {position: relative;
}
#menu ul li a:hover, #menu ul li:hover a.nivel1 {background-color: #6CC;
color: #000;
position: relative;
}
#menu ul li ul {display: none;
}
#menu ul li:hover ul.nivel2, #menu ul li a:hover ul.nivel2{display: block;
position: absolute;left: 0px;
}
#menu ul li ul li a:hover ul.nivel3, #menu ul li ul li:hover ul.nivel3 {display: block;
position: absolute;
left: 140px!important;left: 140px;
top:0px!important;top: -21px;
}
#menu ul li ul li a {width: 140px;
padding: 8px 0px;
border-top-color: transparent;
}
#menu ul li ul li a:hover {border-top-color: #000;
position: relative;
}
#menu ul li ul li ul li a.primera {border-top-color: #fff;
}
table.falsa {border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
#search{ width:35%; background-color:#99CC66; float:right; height:60px;}
.form_search{ padding:17px 0px 0px 5px; text-align:center}
#frases { width:98%; height:30px; padding:10px 10px; font-size:10px; font-family:verdana,Arial, Tahoma,Century gothic, sans-serif;text-align:center; font-style:italic; background-color:#CCFFFF; margin:auto; float:left; }
#wrapper{ width:900px; height:auto; background-color:#FF0000; margin:auto; min-height:150px }
.sidebar{ width: 200px; float:left; background-color:#993; height:auto;}
.widget{ width:200px; margin-bottom:10px; float:left; }
.widget h3{ font-size:15px; margin:0; display:block; text-align:center; padding:5px; color:#ccc; background:#777}
.contenedor{ width: 700px; background-color:#99CCCC; height:auto; float:left; min-height:100px; }
.contenido_principal { line-height:14px; background-color: #33ccff; font-size:17px; font-family:Arial, Helvetica, sans-serif; }
.contenido_principal h1{ text-align:center; font-size:24px; line-height:30px; font-weight:bold; }
.contenido_principal p{ text-align:justify;}
.center{ text-align:center; }
#footer{ width:900px; height:auto; background-color:#c3c3c3; margin:auto; }
Al aumentar el contenido de la clase contenedor no aumenta el tamaño del wrapper. al resolver este problema prometo postear el codigo por si le es de utilidad a alguien mas...  |