Image positioning

Question

I’m having a problem positioning images on a website that I’m developing. Some of them apparently aren’t fitting into a line, in which case, I’ve positioned four per line. I made some attempts, created a div that accommodated all the content of the image, thus:

  <div class="posicao">
    <div class="produtos-wrapper">
      <div class="produtos-conteudo one-fourth"> 
          <a href="detalhes.php?produto=<?php echo $row_rsProdutos['id_produto']; ?>&dep=<?php echo $row_rsProdutos['id_departamento']; ?>&subdep=<?php echo $row_rsProdutos['id_subdepartamento']; ?>"><img class="photo" src="<?php echo $foto; ?>"  /></a>
            <div class="content">
              <h3 class="name"><?php echo $row_rsProdutos['descricao'];  ?> </h3>
              <span class="job-title"> <?php echo $row_rsProdutos['codigo_msb']; ?> </span> </div>
          </div>
      </div>
      <?php } while ($row_rsProdutos = mysql_fetch_assoc($rsProdutos)); ?>              
    </div>

And the css, like this:

.posicao {
float: right;
width:auto;     
}

But the footage still gets the space. The site for verification is this Site for display

Answer 1

When you work with div, basically you have several support squares for content insertion, whether text or multimedia. In this case, there is a lack of height standardization and therefore the Divs do not fit.

Add that to the CSS:

.produtos-conteudo{
height: 200px;
}