Different layout display on website over multiple loads

Question

I am having an extremely odd issue creating a template for my zencart ecommerce website.

I find that many times I load the website my menu will break up and split over two lines as shown below.

The reason I find this behavior odd is that if I refresh the page it correctly displays.

Now I could understand how to fix this if it was consistently one way or the other but it seems to vary between the two with no obvious difference in the code... I am not sure if this is some sort of technical bug with chrome as I haven't been able to replicate it in other browsers however even if it is I really need a way of working around it. So I am curious as to whether anyone has had this issue before and if so how they got around it.

Link to live site: http://digitalmatrixonline.com.au/

Thanks Jason

Answer 1

If you add

white-space:nowrap;

To the div that contains the list it should prevent this, not sure why it's happening though.

Edit: here is a jsfiddle showing the technique http://jsfiddle.net/RM4S2/

Edit: No floats http://jsfiddle.net/BsGfu/2/

Answer 2

This is a really strange problem, and I was able to recreate the quirkiness in Chrome. While I don't know the direct cause of the issue, I think I found one way that works.

If you set the width of the second div within 'navEZpagesTop' that you are floating right that is wrapping,to 'width:485px;'. This seems to give the section room and does not wrap. If you want to leave more room for this expand without modifying the css you could set it to a much larger size, and float all the links inside of this to the right(instead of the left).