CSS randomly breaking?

Breaking in two senses, 1) Functionally breaking and 2) <BR>eaking to a new line.

I have no idea what's causing this problem.. but randomly as I load divs of data with php, I'l开发者_高级运维l get maybe 1 out of 10 to bust:

I can't for the life of me figure this out. Has anyone experienced this before? It's not any specific column or row that's having the problem, and all the CSS and HTML is identical between functioning and broken rows.

If you look very closely, the box with "T. Rask" is just about 1 pixel wider than the other boxes on the left side (S. Varlamov, M. Legace, R.Emery). I would double check your margin width values and also make sure the images are getting their width set correctly.

• Make sure none of those boxes is overflowing horizontally, you can try overflow-x:hidden; to clip out any extra content jutting out. Make sure you apply a width at least for testing.

• If you're floating a lot of elements ( siblings ) it may be worth it to wrap each row in a separate division.

• Make sure the code is consistent and valid

I would strongly suspect that for some reason the width of one of your elements is wider than you want it to be to fit your layout. Whatever the element is add an overflow:hidden; to prevent the additional width from causing it to break.

Does it happen only with two greens on the same line? I can see in the picture that the left boundary of the green one is farther to the right than for the other colors.

Turns out there were too many <DIV>s in the kitchen - cleaned up the div confusion and that fixed it. Why it only happened sometimes is beyond me.

Thanks folks.