Ver Mensaje Individual
  #2 (permalink)  
Antiguo 14/03/2013, 01:53
Avatar de Mariano_Floyd
Mariano_Floyd
 
Fecha de Ingreso: marzo-2013
Ubicación: Córdoba
Mensajes: 155
Antigüedad: 11 años, 8 meses
Puntos: 14
Respuesta: Elementos flotantes en columnas

Tienes que crear 3 divs, uno por cada columna, y dentro de cada div, pones los otros de cada fila, algo asi:


Código:
<div id="contenedor">

<div class="columna1">

<div class=fila1>
</div>

<div class=fila2>
</div>

<div class=fila3>
</div>

<div class=fila4>
</div>

<div class=fila5>
</div>

</div>

<div class="columna2">

<div class=fila1>
</div>

<div class=fila2>
</div>

<div class=fila3>
</div>

<div class=fila4>
</div>

<div class=fila5>
</div>

</div>

<div class="columna3">

<div class=fila1>
</div>

<div class=fila2>
</div>

<div class=fila3>
</div>

<div class=fila4>
</div>

<div class=fila5>
</div>

</div>
</div>
Y luego en css:

Código:
#contenedor{
width:1080px;
height:1360px;
margin:0 auto;
}
.columna1{
width:30%;
float:left;
height:100%;
border:1px solid #000;
box-sizing:border-box;
}
.columna2{
width:40%;
float:left;
height:100%;
border:1px solid #000;
box-sizing:border-box;
}
.columna3{
width:30%;
height:100%;
float:right;

border:1px solid #000;
box-sizing:border-box;
}

.fila1{
background-color:#000;
border:1px solid #fff;
height:20%;
box-sizing:border-box;
width:100%;
}
.fila2{
height:20%;
background-color:#000;
border:1px solid #fff;
box-sizing:border-box;
width:100%;
}
.fila3{
height:20%;
background-color:#000;
border:1px solid #fff;
box-sizing:border-box;
width:100%;
}
.fila4{
height:20%;
background-color:#000;
border:1px solid #fff;
box-sizing:border-box;
width:100%;
}
.fila5{
height:20%;
background-color:#000;
border:1px solid #fff;
box-sizing:border-box;
width:100%;
}
Por supuesto, los tamaños y demás propiedades de css se las puse para que puedas copiar y pegar el código y vieras como queda, a modo de ejemplo, tu puedes darle las propiedades que desees..

Espero haberte sido de ayuda. Saludos