Question

For my current project, i have to float few blocks to the left. My content block is 720px wide, while the blocks in are 350px width. But somewhy they arent floating each other. SOme of them does, some not. To each block i added rule float:left. I would float them with my hand, but i dont know the order of blocks, so cant predict how will it looks;
Here is screenshot of how does it looks now: http://d.pr/i/OKpc

Answer 1

If I understand your question correctly, there are a couple different solutions here. First, you could use some modern selectors to add clear: left to every even-numbered block:

.block-views:nth-child(2n+1) { clear: left; }

This will not work in Internet Explorer 8 or less.

The next solution involves adding an extra div with clear: both after every second block:

HTML:

<div class="block block-views">...</div>
<div class="block block-views">...</div>
<div class="clear"></div>
<div class="block block-views">...</div>
<div class="block block-views">...</div>
<div class="clear"></div>
<div class="block block-views">...</div>
<div class="block block-views">...</div>

CSS:

.clear { clear: both; }