como mostrado a seguir:

Código:

<div id="column1">
      <p>Haec disserens qua de re agatur
      et in quo causa consistat non videt...</p>
   </div>

   <div id="column2">
      <p>causas naturales et antecedentes,
      idciro etiam nostrarum voluntatum...</p>
   </div>

   <div id="column3">
      <p>nam nihil esset in nostra
      potestate si res ita se haberet...</p>
   </div>

A seguir definimos a largura de cada coluna, por exemplo 33%, e declaramos float: left; para cada uma das colunas:

Código:

#column1 {
      float:left;
      width: 33%;
   }

   #column2 {
      float:left;
      width: 33%;
   }

   #column3 {
      float:left;
      width: 33%;
   }

Exemplo

float pode ser declarado left, right ou none.

A propriedade clear

A propriedade clear é usada para controlar o comportamento dos elementos que se seguem aos elementos floats no documento.

Por padrão, o elemento subsequente a um float, ocupa o espaço livre ao lado do elemento flutuado. Veja no exemplo acima que o texto deslocou-se automaticamente para o lado da foto de Bill Gates.

A propriedade clear pode assumir os valores left, right, both ou none. A regra geral é: se clear, for por exemplo definido both para um box, a margem superior deste box será posicionada sempre abaixo da margem inferior dos boxes flutuados que estejam antes dele no código.

Código:

<div id="picture">
      <img src="bill.jpg" alt="Bill Gates">
   </div>

   <h1>Bill Gates</h1>

   <p class="floatstop">causas naturales et antecedentes,
   idciro etiam nostrarum voluntatum...</p>

Para evitar que o texto se posicione no espaço livre deixado pela foto do Bill Gates basta adicionar a seguinte regra CSS:

Código:

#picture {
      float:left;
      width: 100px;
   }

   .floatstop {
      clear:both;
   }

Ver exemplo