I’m unable to accommodate three images online

Question

I’m trying to leave three images per line on a page, set it in the body of the page:

        <div class="produtos-ponta">
      <div class="produtos-conteudo-ponta one-fourth-ponta"><img class="photo" src="imagens-ponta/amsterdam.jpg"/>
        <div class="content">
          <h4 class="name">Descricao</h4>              
        </div>
      </div>
      <div class="produtos-conteudo-ponta one-fourth-ponta"><img class="photo" src="imagens-ponta/arezzo.jpg"/>
        <div class="content">
          <h4 class="name">Descricao</h4>              
        </div>
      </div>
      <div class="produtos-conteudo-ponta one-fourth-ponta"><img class="photo" src="imagens-ponta/belmont.jpg"  />
        <div class="content">
          <h4 class="name">Descricao</h4>              
        </div>
      </div>                    
    </div>

And this in my css:

.produtos-conteudo-ponta {
    position:relative;
    text-align: center;
    margin-bottom: 20px;
    height: 320px;
    float:left;
}

.produtos-conteudo-ponta .photo {   
    max-width:320px;
    max-height:196px;
    width: auto;
    height: auto;   
}

.produtos-ponta {
    position:relative;
}

.one-fourth-ponta {
    width: 20.5%;   
    max-width: 320px;
}

But the images break the line, I would like to leave them in only one.

The viewing page is this: Page

Answer 1

Test with this css:

.produtos-conteudo-ponta{
    float:left
}

It makes all class elements .produtos-conteudo-ponta float to the left, so the Bloquinhos stood side by side.

As stated above the effect can also be achieved with display: inline-block;

Fiddle: Link to view online

Answer 2

Just add display: inline-block; to class: produtos-conteudo-ponta

.produtos-conteudo-ponta {
    display: inline-block;
}

---

Updating

To add more spacing between images you can use the property - margin. For example margin-left:10px; or margin-right:10px;. Or even add both so that they are more or less with an equal margin for both sides.
However I would approach it differently.

As we have 3 divs online (inline), I would make the following calculation:

100 to divide for 3 that gives = 33.333333
This calculation will be - 100% the size of div parent to be divided by 3 divs child

then the width size for the class produtos-conteudo-ponta will be of 33.333333% making them equal in size, and responsive to div parente.
(this considering the possibility that this can be resized later in small resolution screens)

.produtos-conteudo-ponta {
    display: inline-block;
    width: 33.333333%;
}

Then it would modify the hierarchy of the HTML markup code as follows:

<div class="produtos-conteudo-ponta one-fourth-ponta">
    <div class="content">
        <img class="photo" src="/imagens-ponta/amsterdam.jpg"/>
        <h4 class="name">Descricao</h4>              
    </div>
</div>

In the code above we modified the image to be included within the class .content for the following reason:

Instead of us changing class for class and add attributes to each of them, for example - margins, spacing etc over and over again, instead we will just apply the styles to the class .content:

.content {
    display: block;     /* Poderíamos adicionar também width:100%; mas ao adicionarmos este atributo o width:100%; já está a ser aplicado */
    max-width: 200px;   /* Isto especifica que nós não queremos que a div cresça mais do que os 200px */
    margin: 0 auto;     /* Isto centraliza a div ao centro por igual - para ambos, a margem esquerda e a margem direita. É nesessário o display:block; acima já adicionado para que isto funcione correctamente */
}
.photo {width: 100%;}   /* E por fim a imagem ficará a 100% da div "content". que neste caso será o máximo de 200px */

Here’s an online example of this in jsFiddle http://jsfiddle.net/hwjvnzgm

Drag the jsFiddle view window to see its behavior in multiple resolutions.
To increase or decrease the spacing between them just play with the value max-width:200px;