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>
