CSS float / inline block issue

• Would you please examine this jsFiddle?
• Resize the width of t开发者_运维知识库he "result" frame.
• Observe that the layout of the boxes switches between 2 and 3 columns.

This glitch is anoying I want the layout to look like this and stay like this even when I resize the window:

_________
| ▄ ▄ ▄ |
| 1 2 3 |
| ▄ ▄ ▄ |
| 4 5 6 |
¯¯¯¯¯¯¯¯¯

Could you alter the HTML/CSS to perfect the layout and get rid of the glitch?

Thanks in advance!

http://jsfiddle.net/znPGj/3/ fixes it by setting a height in px on the img boxes

check this example http://jsfiddle.net/sandeep/znPGj/4/ css:

a {
    float:left; 
    width: 33%;
    margin: 0;
    padding: 4px 0;
    color: #000;
    font: medium sans-serif;
    text-align: center;
}
a:nth-child(4){clear:both}
img {
    width: 80%;
}

You could wrap all the img in a div and set a specific width on the div

Example: http://jsfiddle.net/jasongennaro/znPGj/5/

Have you tried dropping the width to 32%? Worked for me, but I didn't test on many browsers.