0

Why oh why do I see this extra row in my grid? I'm using the float:left property and percentage widths for each grid container. The markup for each container is part of a WordPress loop, so inserting a clear:both every 4th container isn't easily done. Help!

See the problem in action here.

1
  • I added a counter and used modulus to insert <div class="clear"></div> every 4th box. This helps, but the 1st box is still on it's own row. What gives?
    – workspdx
    Jan 1, 2013 at 0:41

1 Answer 1

0

You have a div with clear:both between first and second content4col.

As a side note, instead of using clear every fourth element you could use box-sizing: border-box to include padding and borders "inside" of your box model.

(EDIT: somehow the editor is not working, so I cannot make my answer look good.)

2
  • Indeed I do! For whatever reason, <?php if ($count%4 == 1) echo '<div class="clear"></div>';?> is dropping clear div right after the first instance of the loop... then ever 4th instance. Any ideas?
    – workspdx
    Jan 1, 2013 at 2:51
  • Well, you could change it to <?php if ($count % 4 == 0) echo '<div class="clear"></div>';?>. But that doesn't solve the underlying problem. (Unfortunately it's challenging to actually solve the underlying problem since the original version is no longer available...)
    – Arkaaito
    Jan 2, 2013 at 18:59

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.