Float left quebrando

[Robson Silva 1]

Bom dia.

Estou começando com css e preciso por 3 divs 1 do lado da outra com margin-right:21px, o problema que a última div quebra pra baixo.

Como faço pra deixar as 3 na mesma linha?

 

 

O código html:

<style>
.moldura {width:600px;background-color:red;height:421px;}
.box {width:180px;float:left;background-color:blue;height:200px;margin:0px 21px 21px 0px;}
</style>

<div class="moldura">
  <div class="box"></div>
  <div class="box"></div>
<div class="box"></div>
</div>

 

Obrigado.

[Giovani 104]

.box = 180px + 21px = 201px :seta: tamanho de 1 box, mutliplicando isso por 3 dá 603px, ou seja, 3px a mais que o tamanho da .moldura.

 

De duas uma, ou você diminui a margem direita ou cria um classe e aplica no ultimo box zerando essa margem.