when zoom browser floats moves - html

Question

i have code:
<div class="container">
<li class="block2"></li>
<ul class="posts first">
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
</ul>
<ul class="posts second">
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
<li class="block"></li>
</ul>
</div>
and css:
container{
width:940px;
margin: 0 auto;
padding:40px;
background:grey;
}
.container:after {
content: "";
display: table;
clear: both;
}
.block{
float:left;
border:1px solid #ccc;
width:216px;
height:186px;
margin: 0 0 20px 22px;
list-style: none;
}
.block2{
float:right;
border:1px solid #fff;
clear:both;
width:217px;
height:603px;
list-style:none;
}
.posts{
margin: 0;
padding: 0;
}
.first .block:nth-child(3n+1){
margin-left:0px;
clear:left;
}
.second .block:nth-child(4n+1){
margin-left:0px;
clear:left;
}
It is ok when browser zoom is 100%, but when i zoom browser window to 25%, floats going move. What i doing wrong and how can i fix it? Code on fiddle: https://jsfiddle.net/92j5yr6c/1/
i need something like this on 25% zoom link

Answer 1

The easiest way to tackle this with the given code is IMHO:
1) Adjust the error in your CSS (I'm assuming that was only a copy error for your JsFiddle) - your container-class is missing the period to make it actually a class. Change
container{ to .container{
and 2)
Change from border to outline (I assume this is acceptable), since borders tend to remain above "just a fraction of a pixel" wide, they end up adding up to more width than is available. And an outline doesn't grow the object, it just sits on top.
works for me:
https://jsfiddle.net/c0hfopug/