Olá, preciso flutuar as divs a left, porém quando chega a quinta div no bloqueio de 1000px ela flutua a direita, e não a left e a margin top fica maior para todas as depois dela, ou seja da quinta div em diante olhem :
quero que fique assim:
E o código que estou utilizando é esse:
HTML
<div class="center">
<div class="boxpost">
<img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
</div>
<div class="boxpost">
<img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
</div>
<div class="boxpost">
<img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
</div>
<div class="boxpost">
<img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
</div>
<div class="boxpost">
<img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
</div>
<div class="boxpost">
<img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
</div>
<div class="boxpost">
<img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
</div>
<div class="boxpost">
<img src="https://33.media.tumblr.com/26bf1c7107a9a765bd28aeabd15dfec5/tumblr_nwyd2kKcpH1u24qqvo1_400.gif" width="239px"/>
</div>
</div>
CSS
.center{
margin: 0 auto;
width:1024px;
}
.boxpost{
width:245px;
overflow:auto;
background-color: #f7f7f7;
border-radius: 3px;
float:left;
margin-top: 10px;
margin-left: 10px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19) !important;
padding-bottom: 5px;
}
.profilepost{
float: left;
width: 100%;
height:50px;
border-bottom:1px solid #CCCCCC;
}
Desculpe pela indentação do código css, tentei colocar na tag code