hola a todos... soy nuevo en este foro y tengo la siguente duda:
ando creando una web de videojuegos "community360.byethost10.com" y el problema esque tengo creado un div flotante de lado izquierdo y lo que pasa esque cuando hay poco contenido el footer se queda abajo del menu izquierdo y lo que quiero es que el footer se ponga abajo del menu izquierdo no al lado.
hay el codigo php y css para ver si me pueden echar la mano
Código PHP:
<body>
<div id="wrapper">
<div id="menu-left">
<div id="menu_left-inicio"></div>
<ul class="navi-left">
<li><a href="#">Noticias</a></li>
<li><a href="#">Foros</a></li>
<li><a href="#">Sala de Chat</a></li>
<li><a href="sec/staff.php">Miembros del Equipo</a></li>
</ul>
<div id="menu_left-xbox360"></div>
<ul class="navi-left">
<li><a href="#">aaaaaaa</a></li>
<li><a href="#">bbbbbbb</a></li>
<li><a href="#">ccccccc</a></li>
</ul>
<div id="menu_left-generos"></div>
<ul class="navi-left">
<li><a href="#">Acción</a></li>
<li><a href="#">Aventura</a></li>
<li><a href="#">Compilaciones</a></li>
<li><a href="#">Familia</a></li>
<li><a href="#">Lucha</a></li>
<li><a href="#">Música</a></li>
<li><a href="#">Plataforma</a></li>
<li><a href="#">Carreras</a></li>
<li><a href="#">RPG</a></li>
<li><a href="#">Shooter</a></li>
<li><a href="#">Simulación</a></li>
<li><a href="#">Deportes</a></li>
<li><a href="#">Estrategia</a></li>
<li><a href="#">Originales Xbox</a></li>
<li><a href="#">Xbox LIVE Arcade</a></li>
</ul>
<div id="menu_left-multimedia"></div>
<ul class="navi-left">
<li><a href="#">aaaaaaa</a></li>
<li><a href="#">bbbbbbb</a></li>
<li><a href="#">ccccccc</a></li>
</ul>
</div><!--Menu left-->
<div id="container">
<div id="publicidad"></div><!--Fin publicidad-->
<div id="menu-right"></div><!--Fin menu right-->
<div id="content"></div><!--Fin content-->
</div><!--Fin container-->
<div id="footer">
<div id="community-logo"></div>
<div id="logo-footer"><a href="#" title="Comunidad online de Xbox 360"></a></div>
<div id="copyright">
<strong>Community360 ©.</strong>Prohivida la reprodicción total o parcial del contenido sin autorización. Community360.byethost10.com/ no es una web oficial, sólo es un fansite.<br/>
Los nombres y logotipos de las compañías y productos aquí mencionados son marcas comerciales de sus respectivos propietarios. <br/>
</div>
</div>
</div><!--Fin wrapper-->
</body>
</html>
Código:
body {
background-color:#535D66;
background-image:url(images/bg_home.png);
background-position:top center;
background-repeat:no-repeat;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
margin:0;
}
#wrapper {
background-image:url(images/wrapper_bg.png);
background-repeat:repeat-y;
height:auto;
margin-bottom:10px;
margin-left:auto;
margin-right:auto;
margin-top:320px;
overflow:hidden;
width:1000px;
}
#container {
background-image:url(images/container-bg.png);
height:auto;
overflow:hidden;
padding-left:10px;
padding-right:10px;
width:820px;
}
#menu-left {
background-color:#7AA827;
float:left;
font-size:12px;
font-weight:bold;
height:auto;
width:160px;
}
#menu_left-inicio {
background-image:url(images/menu_left-inicio.png);
background-repeat:no-repeat;
height:30px;
width:160px;
}
#menu_left-xbox360 {
background-image:url(images/menu_left-xbox360.png);
background-repeat:no-repeat;
height:30px;
width:160px;
}
#menu_left-generos {
background-image:url(images/menu_left-generos.png);
background-repeat:no-repeat;
height:30px;
width:160px;
}
#menu_left-multimedia {
background-image:url(images/menu_left-multimedia.png);
background-repeat:no-repeat;
height:30px;
width:160px;
}
.navi-left {
list-style:none;
margin:0;
padding:0;
}
.navi-left li {
margin:0;
padding:0;
}
.navi-left li a {
color:#FFFFFF;
display:block;
padding-left:3px;
padding-right:3px;
text-align:left;
text-decoration:none;
}
.navi-left li a:hover {
background-color:#336600;
color:#FFFFFF;
}
#menu-right {
float:right;
width:200px;
}
#publicidad {
height:90px;
padding-bottom:5px;
padding-top:5px;
margin-left:auto;
margin-right:auto;
width:728px;
}
#content {
height:auto;
margin-bottom:10px;
width:610px;
}
#footer {
background-image:url(images/footer.png);
background-repeat:no-repeat;
height:80px;
width:1000px;
}
#copyright {
color:#FFF;
height:50px;
padding:15px;
text-align:center;
width:886px;
}
#logo-footer a{
background-image:url(images/logo-footer.png);
background-repeat:no-repeat;
display:block;
float:right;
height:50px;
margin:15px;
width:69px;
}
#logo-footer a:hover {
background-position: 0 -50px;
}
saludos!!!
