Problema con posicion divs

manuxdjent · #1 (**permalink**) 08/12/2012, 12:35

Buenas , estoy desarrollando una plantilla y me encuentro con un problema, al posicionar el div "botones" y sus hijos para que se centren, me los sobrepone encima del otro div que hay mas abajo ("contenido"), lo que quiero es que se posicionen justo arriba del div "contenido" no dentro, si alguien me pude echar una mano me haría un gran favor, gracias y un saludo.

ESTILO.CSS

Código CSS:

Ver originalbody{
background-color:white;
margin:0;
}
#cabecera img{
display:block;
margin:0 auto;
height:200px;
width:558px;
margin-bottom:50px;
margin-top:30px;
-webkit-animation-name: logo    ;
-webkit-animation-timing-function: linear;
-webkit-animation-duration: 3s;
 
}
@-webkit-keyframes logo {
  from {  opacity:0;  }
  to   { opacity:1; }
}
 
#contenido{
width:100%;
-webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
height:800px;
background-color:#FFA200;
}
#botones {
width:400px;
margin:0 auto;
 
}
#venda{
width:200px;
height:50px;
background-color:#FFA200;
-webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
-webkit-border-radius:15px 15px 0 0;
margin:0 auto;
float:left;
}
#lloguer{
width:200px;
height:50px;
background-color:#FFA200;
-webkit-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
-moz-box-shadow: inset 0 4px 6px rgba(0,0,0,.5);
-webkit-border-radius:15px 15px 0 0;
margin:0 auto;
float:left;
 
}

INDEX.HTML

Código HTML:

Ver original<!DOCTYPE html>
<HTML>
<HEAD>
    <LINK rel="stylesheet" href="estilo.css">
</HEAD>
<BODY>
    <DIV id="cabecera">
        <IMG src="logo.png"/>
    </DIV>
    <DIV id="botones">
            <DIV id="venda">
            </DIV>
            <DIV id="lloguer">
            </DIV>
    </DIV>
        <DIV id="contenido">
        </DIV>
    
</BODY>
</HTML>

http://inmobiliaria.xtrweb.com/plantilla/

manuxdjent · #2 (**permalink**) 08/12/2012, 12:38

Lo he solucionado dándole al div "botones" un height.
Gracias de todos modos por visitar el post.
Un saludo.

pzin · #3 (**permalink**) 08/12/2012, 12:49

Lo de height soluciona el problema si, pero yo en vez de darle una altura, le pondría un overflow:hidden, ya que el problema está en que no crece debido a que todo el contenido de #botones está flotado.
Si #botones no tiende a cambiar su altura, puedes dejarlo con height. Lo malo es eso, cuando añadas más contenido si lo haces a #botones, tendrás que cambiarlo manualmente, mientras que usando overflow:hidden la capa crecerá según su contenido.