caja con 3 columnas

[cañangasñangas]

Necesito crear una caja con 3 columnas en css a quien se le ocurre una?

 

más especifico necesito esto:

 

http://aquazone.webhop.biz/

 

lo que aparece en el menu...

Edited September 13, 2015 by cañangasñangas

[nazhox]

lo más simple...

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<div class="row">
  <div class="col-xs-4">
    col 1
  </div>
  <div class="col-xs-4">
    col 2
  </div>
  <div class="col-xs-4">
    col 3
  </div>
</div>

[cañangasñangas]

Es que quiero aprender y prefiero hacerlo con código puro.

[nazhox]

en ese caso basta con ver el código fuente...

<style>
  .col{
    float: left;
    width: 33.33333333%;
  }
  .row:before,.row:after{
    display: table;
    content: " ";
  }
  .row:after {
    clear: both;
  }
</style>

<div class="row">
  <div class="col">
    col 1
  </div>
  <div class="col">
    col 2
  </div>
  <div class="col">
    col 3
  </div>
</div>

[cañangasñangas]

para cambiar la anchura de c/col tendria que hacer algo asi?

<style>
.col1{
float: left;
width: 33.33333333%; <!-- mi ancho -->
}

.col2{
float: left;
width: 33.33333333%; <!-- mi ancho -->
}

.col3{
float: left;
width: 33.33333333%; <!-- mi ancho -->
}

.row:before,.row:after{
display: table;
content: " ";
}
.row:after {
clear: both;
}
</style>

<div class="row">
<div class="col1">
col 1
</div>
<div class="col2">
col 2
</div>
<div class="col3">
col 3
</div>
</div>

sierto?

 

[nazhox]

exacto. Ojo que la suma de las columnas no puede ser mayor a 100.

[cañangasñangas]

exacto. Ojo que la suma de las columnas no puede ser mayor a 100.

 

% o pixeles

[nazhox]

 

exacto. Ojo que la suma de las columnas no puede ser mayor a 100.

 

% o pixeles

 

 

100%.

 

Si ocupas pixeles, la suma del ancho de todas las columnas no debe superar el ancho de la caja que contiene las columnas.

[cañangasñangas]

man me resulta esto: