Как выровнять сетку с float?

Question

[deleted-stiping]

Имеется некий код:

<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>

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;
}

При разрешении браузера в 100% все выглядит правильно, но если начать менять разрешение окна до 25% то вся сетка сьезжает, подскажите как можно исправить это, что бы сетка была такой же ровной как при разрешении в 100% Код на фидле: https://jsfiddle.net/92j5yr6c/1/

Answer 1

[GreatRash]

1) li нельзя вкладывать в div
2) нужно заменить float: left; на display: inline-block; и задать маргин не слева, а с обеих сторон

Comments

[deleted-stiping]

а во что его вложить?

[deleted-stiping]

1. li в контейнере, т.к сайт на движке wordpress и li выводится функцией.
2. Флоат не могу заменить по причине того что есть float:right, или вы имеете ввиду только float -left?

[deleted-stiping]

Маргин с обеих сторон нельзя т.к 1 элемент должен быть четко у границ контейнера

Answer 2

[vvvadimos]

если ширину блоков пикселями задавать, при масштабировании все равно все ездить будет. нужны %. если блока 3 в ряд, то значение ширины 33.33333333333333% ставится, или меньше троек после запятой) inline-block использовать можно, как написал GreatRash, но не надежно. отступы между inline-block элементами в разных браузерах могут быть разными. если нужны какие-то отступы между элементами, советую в каждый ваш .block вложить еще по элементу, тогда управлять отступами проще. получится что .block всегда определенной ширины, а уже внутренний с отступами, т.е. не нужно сидеть и считать сколько должна быть ширина блока, если у него есть padding margin, чтобы ничего не ехало