Hola a todos,
Estoy intentando rehacer mi website y me surgió un problema que antes sabia resolver pero ya he olvidado cómo.
El template es de 3 columnas + header +footer. La columna de la izquierda y la de contenido (main) estan dentro de un div que tiene un fondo gris el cual no puedo cambiar porque con ese fondo es que muestro las divisiones entre las columnas.
El problema:
Es que cuando una de las dos columnas es más grande que la otra, a la mas corta, se le ve el fondo gris.
Lo que quiero:
Es que cuando una de las dos crezca la otra lo haga igual y en la mismaa proporción para que siempre se mantengan parejas.
Lo que he intentado:
entre otras cosas fue ponerle un minimum height de 400px pero lueg que otra sobre pas ese limite vuelve a salir el gris.
Este es el template en el que estoy trabajando.
[URL="http://jdownloads.net/social/"]template[/URL]
Les dejo el código css + index
Código PHP:
<body>
<div id="container">
<div id="header">
<div id="topleftmenu">
<div id="logo">
<img src="images/logo.png" alt="" width="168" align="left" class="" title=""/>
</div>
<div id="friends">
<img alt="" title="" class="" src="images/friends.png"/>
</div>
<div id="message">
<img alt="" align="left" title="" class="" src="images/message.png"/>
</div>
<div id="addcontact">
<img alt="" align="left" title="" class="" src="images/add_contact.png"/>
</div>
</div>
<!--end topleftmenu -->
<div id="topmenuborder">
<div id="topmenu" style="border-left:#eee 1px; border-right:#eee 1px; border-top:#eee 1px; background-color:#eee;">
<div id="search">
<img alt="" align="left" title="" class="" border="1px #b3b3b3"src="images/search.png"/>
</div>
<!--end search -->
<div id="rightmenu">
<div id="home"><font class="" color="#000">Home</font></div>
<div id="profile"> <font color="#000">Profile</font></div>
<div id="account"> <font color="#000">Account</font>
<img src="images/arrow4.png"/></div>
</div>
<!--end rightmenu -->
</div>
<!--end topmenu -->
</div>
<!--end topmenuborder -->
</div>
<!--end header -->
<div id="wrapper">
<div id="main">
<h2>Iván Rivera</h2>
<img src="images/profile.jpg"/> </div>
<div id="whiteleft">
<div id="subnav">
<img src="images/profile.jpg"/>
</div></div>
<div id="footer">
<p>JDownloads © 2011 · Español
Acerca de · Publicidad · Desarrolladores · Empleo · Privacidad · Condiciones · Servicio de ayuda</p>
</div>
<!--end footer -->
</div>
<!--end wrapper -->
<div id="extra">
<div id="extraright">
<h2>Extra Column</h2>
<p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p><p>Lorem ipsum sit dolor amet. Lorem ipsum sit dolor amet. </p>
</div>
</div>
<!--end extra -->
</div>
<!--end container -->
</body>
[CSSbody {
font: "Times New Roman", Times, serif;
font-size:15px;
background: #fff;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
margin-top:0px;
}
#container{
margin-top:10px;
}
#header {
background: #fff;
width: 100%;
height: 41px;
text-align:center;
}
#topleftmenu{
padding-left:30px;
height:41px;
width:264px;
float:left;
}
#logo{
float:left;
height:41px;
width:183px;
}
#friends{
height:41px;
width:22px;
float:left;
padding-left:5px;
}
#message{
height:41px;
width:22px;
float:left;
padding-left:5px;
}
#addcontact{
height:41px;
width:22px;
float:left;
padding-left:5px;
}
#topmenuborder{
margin-left:304px;
height:41px;
width: 700px;
background-color:#b3b3b3;
}
#topmenu{
padding-left:.1px;
float:left;
padding-right:34px;
margin-left:1px;
margin-top:1px;
height:40px;
width: 664px;
}
#search{
padding-left:5px;
padding-top:5px;
height:36px;
width:389px;
float:left;
}
#rightmenu{
background-color:#b3b3b3;
margin-left:473px;
margin-top:10px;
height:31px;
width:225px;
}
#home{
margin-left:1px;
font: 80% Verdana, Arial, Helvetica, sans-serif;
height:31px;
width: 60px;
background-color:#eee;
float:left;
}
#profile{
margin-left:1px;
font: 80% Verdana, Arial, Helvetica, sans-serif;
height:31px;
width: 65px;
background-color:#eee;
float:left;
}
#account{
margin-left:1px;
font: 80% Verdana, Arial, Helvetica, sans-serif;
height:31px;
padding-right:9px;
width: 88px;
background-color:#eee;
float:left;
}
#wrapper{
background-color:#b3b3b3;
float: left;
margin-left:30px;
width:974px;
}
#main {
margin-left:1px;
margin-right:1px;
margin-bottom:1px;
padding-top:20px;
background-color:#fff;
width: 698px;
float:right;
min-height:500px;
}
#whiteleft{
background-color:#fff;
}
#subnav {
background-color:#fff;
width: 274px;
float:left;
min-height:400px;
padding-top:20px;
padding-bottom:1px;
}
#extra {
width: 200px;
margin-right:30px;
background-color:#fff;
padding-left:1035px;
}
#extraright{
background-color:#fff;
float:lef;
}
#footer {
background-color:#fff;
padding-left: 275px;
width: 700px;
float: left;
}[/CSS]