Why is this happening? Think it is an issue with clearfix?

Question

Here is the issue: As you can see on the left the floated elements do not align, and on the right they do.

http://i.stack.imgur.com/Qx8Zs.jpg

This doesn't happen all the time, and it isn't browser specific (AFAIK) - it corrects itself upon refresh... I'm thinking it's a problem with the clearfix? CSS below.

.clear:after {
    clear: both; 
    content: "."; 
    display: block; 
    font-size:0;
    height: 0; 
    visibility: hidden; 
}
.clear { 
    display: inline-block;  
}
* html .clear {  
    height: 1%;  
} /* Hides from IE-mac \*/
.clear {  
    display: block;  
}

Answer 1

I can't replicate the problem but here's some suggestions.

1. Give you #networks div a width
2. Give #networks overflow:auto
3. Remove the clear div from #networks
4. Include the HTML5 shive for IE if you haven't already (I couldn't see it)

Answer 2

This is the answer http://jsfiddle.net/xVzAY/