Como flutuar 3 divs lado a lado usando CSS?

Eu sei como fazer 2 divs flutuar lado a lado, simplesmente flutuar um para a esquerda e outro para a direita.

Mas como fazer isso com 3 divs ou devo apenas usar tabelas para esse fim?

Apenas dê a eles uma largura e float: left;, aqui está um exemplo:

<div style="width: 500px;">
 <div style="float: left; width: 200px;">Left Stuff</div>
 <div style="float: left; width: 100px;">Middle Stuff</div>
 <div style="float: left; width: 200px;">Right Stuff</div>
 <br style="clear: left;" />
</div>

A maneira moderna é usar o flexbox CSS , consulte as tabelas de suporte .

.container {
  display: flex;
}
.container > div {
  flex: 1; /*grow*/
}

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

Você também pode usar a grade CSS , consulte as tabelas de suporte .

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* fraction*/
}

<div class="container">
  <div>Left div</div>
  <div>Middle div</div>  
  <div>Right div</div>
</div>

É da mesma maneira que você faz para os dois divs, apenas flutue o terceiro para a esquerda ou direita também.

<style>
  .left{float:left; width:33%;}
</style>

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

flutuar todos eles à esquerda

verifique se uma largura é especificada para que todos possam caber em seu contêiner (outra div ou a janela), caso contrário eles serão agrupados

<br style="clear: left;" />

aquele código que alguém postou lá em cima, deu certo !!! quando colo antes de fechar o DIV do contêiner, ajuda a evitar que todos os DIVs subseqüentes se sobreponham aos DIVs que criei lado a lado na parte superior!

<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!--  then magic trick comes here  -->
<br style="clear: left;" />
</div>

tadaa !! :)

Flutue todos os três divs para a esquerda. Como aqui:

.first-div {
  width:370px;
  height:150px;
  float:left;
  background-color:pink;
}

.second-div {
  width:370px;
  height:150px;
  float:left;
  background-color:blue;
}

.third-div {
  width:370px;
  height:150px;
  float:left;
  background-color:purple;
}

Normalmente, apenas flutuo o primeiro para a esquerda e o segundo para a direita. O terceiro alinha automaticamente entre eles então.

<div style="float: left;">Column 1</div>
<div style="float: right;">Column 3</div>
<div>Column 2</div>

<style>
.left-column
{
float:left;
width:30%;
background-color:red;
}
.right-column
{
float:right;
width:30%;
background-color:green;
}
.center-column
{
margin:auto;
width:30%;
background-color:blue;
}
</style>

<div id="container">
<section class="left-column">THIS IS COLUMN 1 LEFT</section>
<section class="right-column">THIS IS COLUMN 3 RIGHT</section>
<section class="center-column">THIS IS COLUMN 2 CENTER</section>
</div>

a vantagem dessa maneira é que você pode definir cada largura de coluna independente da outra, desde que a mantenha abaixo de 100%, se você usar 3 x 30%, os 10% restantes serão divididos como um espaço divisor de 5% entre as colunas

você pode flutuar: deixou para todos eles e defina a largura para 33.333%

tente adicionar "display: block" ao estilo

<style>
   .left{
          display: block;
          float:left; 
          width:33%;
    }
</style>


<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

Não vi a resposta do bootstrap, então quanto vale a pena:

<div class="col-xs-4">Left Div</div>
<div class="col-xs-4">Middle Div</div>
<div class="col-xs-4">Right Div</div>
<br style="clear: both;" />

deixe o Bootstrap descobrir as porcentagens. Eu gosto de limpar os dois, só por precaução.

Eu prefiro esse método, os carros alegóricos são pouco suportados nas versões mais antigas do IE (realmente? ...)

.column-left{ position:absolute; left: 0px; width: 33.3%; background: red; }
.column-right{position:absolute; left:66.6%; width: 33.3%; background: green; }
.column-center{ position:absolute; left:33.3%; width: 33.3%; background: yellow; }

ATUALIZADO: É claro que, para usar esta técnica e devido ao posicionamento absoluto, você precisa colocar as divs em um contêiner e fazer um pós-processamento para definir a altura de if, algo como isto:

jQuery(document).ready(function(){ 
    jQuery('.main').height( Math.max (
        jQuery('.column-left').height(),
        jQuery('.column‌​-right').height(),
        jQuery('.column-center').height())
    ); 
});

Não é a coisa mais incrível do mundo, mas pelo menos não quebra nos IEs mais antigos.

Mas isso funciona no Chrome?

Faça flutuar cada div e defina clear; ambos para a linha. Não há necessidade de definir larguras, se você não quiser. Funciona no Chrome 41, Firefox 37, IE 11

Clique para JS Fiddle

HTML

<div class="stack">
    <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
    </div>
        <div class="row">
        <div class="col">
            One
        </div>
        <div class="col">
            Two
        </div>
                    <div class="col">
            Three
        </div>
    </div>
</div>

CSS

.stack .row { 
clear:both;

}
.stack .row  .col    {
    float:left;
      border:1px solid;

}

Aqui está como eu consegui fazer algo semelhante a isso dentro de um <footer>elemento:

<div class="content-wrapper">

    <div style="float:left">
        <p>&copy; 2012 - @DateTime.Now.Year @Localization.ClientName</p>
    </div>

    <div style="float:right">
        <p>@Localization.DevelopedBy <a href="http://leniel.net" target="_blank">Leniel Macaferi</a></p>
    </div>

    <div style="text-align:center;">
        <p>☎ (24) 3347-3110 | (24) 8119-1085&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;✉ @Html.ActionLink(Localization.Contact, MVC.Home.ActionNames.Contact, MVC.Home.Name)</p>
    </div>

</div>

CSS:

.content-wrapper
{
    margin: 0 auto;
    max-width: 1216px;
}

@Leniel esse método é bom, mas você precisa adicionar largura a todas as divs flutuantes. Eu diria que torná-los iguais ou atribuir largura fixa. Algo como

.content-wrapper > div { width:33.3%; }

você pode atribuir nomes de classe a cada div em vez de adicionar inline style, o que não é uma boa prática.

Certifique-se de usar uma div clearfix ou div limpa para evitar que o conteúdo a seguir permaneça abaixo dessas div.

Você pode encontrar detalhes de como usar o clearfix div aqui