Layout in Chrome breaks on initial page load, corrects after reloaded?

Question

Very strange problem: when my webpage loads for the first time, the layout is broken like so:

If I refresh the browser, the layout is corrected and appears as it should:

Here are the styles which affect this portion of the layout:

#cart-container {
    background-color: #000000;
    width: 176px;
    height: 35px;
    float: right;
    margin-top: 74px;
}

I have no idea why this is happening and why it corrects if the page is reloaded. Anybody?

Answer 1

I discovered the issue: the element #cart-container had a class attached to it which set the position on it to relative. This combined with the float: right caused the issue.

To resolve it, I removed the class that assigned relative positioning, kept the float right and then adjusted the absolutely positioned elements containing both the text ("shopping cart") and the down arrow. All is good now.