Un div no contiene a otro

[lautitow]

Miren, nunca postie en este foro, veo que brindan ayuda y por eso es que estoy aca, casi nunca tengo problemas para hacer las cosas que quiero, o siempre encuentro solucion, pero la verdad esto me esta volviendo loco.

Hice una plantilla simple, conformada de 2 columnas, un menu (float:left), y un contenido (right), adentro de un contenedor que deberia de abaarcar todo ademas de estirarse y adaptarse a toda la pantalla.. el problema es que al agregar varios menus, éstos se salen del contenedor, haciendo que no se "estire" y queden los menus afuera.

Probe haciendo un div con clear:both al final o entremedio para solucionarlo, y no, overflow, en auto me funciona, pero tiene un scroll y es feo., la verdad no se que hacer.

Dejo el codigo css entero, y la parte html, a ver si hay un error de tipeo, y bueno una foto para que entiendan..

Código:

* {
font-family: Comic Sans MS;
font-size: 12px;
font-weight: bold;
outline: 0;
}

body {
background: #FFEBCD;
margin-top: 0px;
margin-bottom: 0px;
}

#contenedor {
width: 900px;
height: 100%;
background: #FFAF64;
margin: auto;
border-right: double 4px #646464;
border-left: double 4px #646464;
}

#toronja {
width: 202px;
float: left;
background: blue;
}

#toronjados {
width: 698px;
float: right;
background: red;
}

a {
color: red;
text-shadow: 0.5px 0px 0px black;
text-decoration: none;
}

a:hover {
color: #CD0000;
text-decoration: underline;
}

h1 {
color: #CD6400;
font-size: 28px;
text-align: center;
text-transform: uppercase;
text-shadow: 1px 1px 1px black;
}

h2 {
color: #CD6400;
font-size: 22px;
border-bottom: 1px dotted #CD6400;
text-align: center;
text-transform: capitalize;
text-shadow: 1px 1px 1px black;
}

#banner {
width: 100%;
height: 90px;
color: #FF8200;
text-indent: 10px;
font-size: 48px;
text-transform: capitalize;
text-shadow: 1px 2px 1px black;
}

#menu {
width: 180px;
background: #FFCC9B;
color: #000;
padding: 5px;
margin-bottom: 15px;
margin-left: 10px;
border: solid 1px #646464;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

#contenido {
width: 665px;
background: #FFCC9B;
color: #000;
min-height: 350px;
padding: 5px;
margin-right: 10px;
margin-left: 10px;
border: solid 1px #646464;
-webkit-border-top-left-radius: 15px;
-webkit-border-top-right-radius: 15px;
-moz-border-radius-topleft: 15px;
-moz-border-radius-topright: 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}

#saraza {
height: 30px;
width: 100%;
clear: both;
}

#footer {
width: 100%;
margin: auto;
height: 20px;
color: #FFAF64;
text-shadow: 0px 0px 4px #111;
font-size: 11px;
border-bottom: 1px dashed #cf8e52;
text-align: center;
}

Código HTML:

<div id="contenedor">


<div id="banner">Banner</div>


<div id="toronja">
<div id="menu">
<br />
Esto es texto, lasdlkmasd ,asda s,das das dlasldkaslda ksda, ,asldkasldkaslkdlasd una
<br />
<a href="#">Link</a>
</div> 
<div id="menu">
<br />
Esto es texto, lasdlkmasd ,asda s,das das dlasldkaslda ksda, ,asldkasldkaslkdlasd una
<br />
<a href="#">Link</a>
</div> 
<div id="menu">
<br />
Esto es texto, lasdlkmasd ,asda s,das das dlasldkaslda ksda, ,asldkasldkaslkdlasd una
<br />
<a href="#">Link</a>
</div> 
<div id="menu">
<br />
Esto es texto, lasdlkmasd ,asda s,das das dlasldkaslda ksda, ,asldkasldkaslkdlasd una
<br />
<a href="#">Link</a>
</div> 
<div id="menu">
<br />
Esto es texto, lasdlkmasd ,asda s,das das dlasldkaslda ksda, ,asldkasldkaslkdlasd una
<br />
<a href="#">Link</a>
</div> 
<div id="menu">
<br />
Esto es texto, lasdlkmasd ,asda s,das das dlasldkaslda ksda, ,asldkasldkaslkdlasd una
<br />
<a href="#">Link</a>
</div> 
<div id="menu">
<br />
Esto es texto, lasdlkmasd ,asda s,das das dlasldkaslda ksda, ,asldkasldkaslkdlasd una
<br />
<a href="#">Link</a>
</div> 
</div> 



<div id="toronjados">
<div id="contenido">
<h1>texto uno</h1>
<h2>Texto dos</h2>
<br />
Esto es texto, lasdlkmasd ,asda s,das das dlasldkaslda ksda, ,asldkasldkaslkdlasd una
<br />
<a href="#">Link</a>
</div>
</div>



<div id="saraza"></div>
<div id="footer">Hecho por Lautii.</div>


</div> 

[fede5426]

Overflow: hidden al contenedor.. Proba eso

Saludos

[lautitow]

overflow, en auto me funciona, pero tiene un scroll y es feo., la verdad no se que hacer.

En hidden, se corta la plantilla..

[fede5426]

Eso es porque tenes el height:100%

[AngelKrak]

nno entendi muy bien :/ cual es el problema exacto y que es lo que quieres exactammente?

[fede5426]

lautitow probé tu código tal cual lo pasaste y funciona bien.

Igual, el overflow:hidden te corta la pantalla porque tenes el height al 100%, si le sacas ese height debería funcionar.

[lautitow]

ah bueno, pero entonces, como hago que el fondo (Color naranja), se extienda en toda la pantalla y se adapte, porque como se ve en la foto se sobresalen los menus... y la idea es que obviamente no lo hagan.. Lo que quiero decir, es que ese fondo color naranja, deberia llegar a tapar todo el alto, incluso hasta donde dice "Hecho por", osea todo el alto de la pantalla,sea la resolucion que sea.. por eso puse height 100% es el unico modo que entiendo para hacer lo que queria... a menos que haya alguna forma de adaptar lo que hice para que funcione..


Edito algo:

Sacando la propiedad HEIGHT, funciona y queda asi (fijarse el fondo, color naranja)

Siempre y cuando tenga muchos menus que sobrepasen el ALTO de la PANTALLA...

Ahora, lo que yo busco, es que aun sin tener ningun menu o tener pocos, ese fondo naranja, abarque todo el alto.. Por que esto es lo que pasa si tengo pocos: