Bom dia pessoal, tenho um codigo aqui em php que montei, funciona da seguinte forma, bem simples eu vou adicionando box "produto" e ele vai colocando um a baixo do outro, só que eu quero que ele apareça um do lado do outro e que quando desse 3 em uma linha, quebrasse para a próxima, mais não estou dando conta de fazer isso segue o código;
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
a:link, a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
color: #f00
}
a:active {
text-decoration: none;
}
#caixa{
width:350px;
height:450px;
padding:8px;
background-color:#fff;
border-radius: 10px;
border-color:#000000;
border-color: #2C3E50;
border-style: solid;
border-bottom-width: 5px;
border-top-width: 5px;
border-right-width: 1px;
border-left-width: 1px;
}
#caixa:hover{
width:350px;
height:450px;
padding:8px;
background-color:#fff;
border-radius: 10px;
border-color:#000000;
box-shadow:0 1px 10px #A6A6A6;
border-color: #2C3E50;
border-style: solid;
border-bottom-width: 5px;
border-top-width: 5px;
border-right-width: 1px;
border-left-width: 1px;
}
#texto-superior{
text-align: center;
font-size: 11px;
color:#D5D5D5;
}
#titulo-webinar{
text-align: center;
color:#2C3E50;
}
#topicos{
text-align: left;
color:#7C7C7C;
padding: 2px 0px 0px 20px;
}
#botao{
text-transform: uppercase;
width:350px;
height:35px;
padding: 8px 0px 0px 0px;
background-color:#DF4000;
border-radius: 10px;
text-align: center;
box-shadow:0 1px 10px #A6A6A6;
color:#7C7C7C;
position: absolute;
color:#FFF;
font-size: 20px;
}
#divisoria{
padding: 10px 0px 0px 0px;
}
</style>
</head>
<body>
<?php
include("./configuracao/conn.php");
error_reporting(E_ALL & ~ E_NOTICE & ~ E_DEPRECATED);
$sql = "SELECT * FROM webinardados WHERE categoria = 'Data prevista'";
$resultado = mysql_query($sql);
?>
<?php while ($webinar = mysql_fetch_assoc($resultado)) { ?>
<div id="caixa">
<div id="texto-superior">
<p> PALESTRA ONLINE </p>
</div>
<div id="titulo-webinar">
<h3><?php echo $webinar['titulo']; ?></h3>
</div>
<div id="divisoria">
<hr width=300 size=1 color=#D5D5D5 noshade>
</div>
<div id="topicos">
<p><i class="fa fa-calendar" aria-hidden="true"></i> <?php echo $webinar['datawb']; ?></p>
<p><i class="fa fa-check-circle-o" aria-hidden="true"></i> <?php echo $webinar['topico1']; ?></p>
<p><i class="fa fa-check-circle-o" aria-hidden="true"></i> <?php echo $webinar['topico2']; ?></p>
<p><i class="fa fa-check-circle-o" aria-hidden="true"></i> <?php echo $webinar['topico3']; ?></p>
</div><br><br><br><br>
<a href="<?php echo $webinar['linkbtn']; ?>" id="botao" target="blank" title="<?php echo $webinar['titulo']; ?>">
<?php echo $webinar['textobtn']; ?>
</a>
</div><br>
<?php } ?>
</body>
</html>
E um código simples, funciona perfeitamente, quando eu adiciono novos produtos, ele e adicionado certinho só que o problema e que ele esta indo para baixo, e eu quero que ele fique lado ao lado e quando der 3 em uma linha ele quebre e comece a ser adicionado a baixo em ordem que os mais recente fiquem na primeira linha, só que não dei conta de fazer esse procedimento rs.