Alienar horizontalment con diferentes alturas

hinfra · #1 (**permalink**) 11/03/2010, 14:41

Saludos, tengo un pequeño problemilla con CSS.

Tengo el siguiente código CSS:

Código CSS:

Ver originalbody{
text-align:center;
background-color:#b1005b;
}
 
#contenedor{
margin: auto;
margin-top: 150px;
width: 900px;
height: 400px;
text-align:left;
background-color:#fff;
}
 
#boton1{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float: left;
cursor: pointer;
position:relative;
}
 
#boton2{
color:#000;
background-color:#ccc;
width: 150px;
height: 230px;
float:left;
cursor: pointer;
position:relative;
}
 
#boton3{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
position:relative;
}
 
#boton4{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
position:relative;
}
 
#boton5{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
position:relative;
}
 
#boton6{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
position:relative;
}
 
#aa{
background-color:#ff0000;
width: 900px;
height: 200px;
float:left;
}

Y el siguiente HTML:

Código HTML:

Ver original<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>
    </head>
    
    <link href="css/style.css" rel="stylesheet" type="text/css" />
    
    <script src="js/jquery-1.4.2.min.js"></script>
    
    <script src="js/functions.js"></script>
    
    
    <body>
        <div id="contenedor">
            <div id="boton1">Boton1</div>
            <div id="boton2">Boton2</div>
            <div id="boton3">Boton2</div>
            <div id="boton4">Boton2</div>
            <div id="boton5">Boton2</div>
            <div id="boton6">Boton2</div>
        
        
            <div id="aa">
            
            Hola
            
            </div>
        
        </div>
        
    </body>
</html>

El problema es que los "botones" se ven así:

Y yo lo que quiero es que se vean así:

El problema es que el DIV se hace más largo y se mueve toda la web hacia abajo. Y yo lo que quiero es que el DIV se haga más alto... no sé si me explico, pero las imágenes hablan por si solas.

¡Gracias!

Sebacx · #2 (**permalink**) 12/03/2010, 22:18

Hola Hinfra! Que tal? Soy nuevo por estos pagos, y dando vueltas por esta parte del foro me tope con tu inquietud.

Yendo a tu duda:

Probaste de agregarle "margin-top: 30px;" a cada boton, excepto el boton 2 que es que tiene la altura de mayor jerarquia?

Es decir:

Código CSS:

Ver originalbody{
text-align:center;
background-color:#b1005b;
}
 
#contenedor{
margin: auto;
margin-top: 150px;
width: 900px;
height: 400px;
text-align:left;
background-color:#fff;
}
 
#boton1{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float: left;
cursor: pointer;
position:relative;
margin-top: 30px;
}
 
#boton2{
color:#000;
background-color:#ccc;
width: 150px;
height: 230px;
float:left;
cursor: pointer;
position:relative;
}
 
#boton3{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
position:relative;
margin-top: 30px;
}
 
#boton4{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
position:relative;
margin-top: 30px;
}
 
#boton5{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
position:relative;
margin-top: 30px;
}
 
#boton6{
color:#000;
background-color:#ccc;
width: 150px;
height: 200px;
float:left;
cursor: pointer;
position:relative;
margin-top: 30px;
}
 
#aa{
background-color:#ff0000;
width: 900px;
height: 200px;
float:left;
}

Agregandole el margen al top de cada boton, se puede llegar al resultado que deses en la imagen!

Saludos espero haber interpretado bien tu pregunta!