Chrome loading forces float:right to new line

Question

I'm having a loading issue in chrome only where certain times it loads it all at once and the float looks fine in the menu, but other times it loads it slower than usual and it causes the float to break to a new line. I notice it usually only happens on hard refreshes (F5) but it does sometimes occur when just clicking around.

It is not a problem in IE, Firefox, or Safari. Anyone have any edits to my code to fix this problem?

Here is my code:

HTML:

$text .=    '<div class="block-menu ">';
$text .=        '<a class="block-menu-item logo gray" href="/"></a>';
$text .=        '<a class="block-menu-item">Button 1</a>';
$text .=        '<a class="block-menu-item">Button 2</a>';
$text .=        '<a class="block-menu-item">Button 3</a>';

//Floats right
$text .=        '<div id="block-menu-bar-button">';
$text .=            '<a class="block-menu-item">Button 4</a>';
$text .=            '<a class="block-menu-item">Button 5</a>';
$text .=            '<div style="clear:both;"></div>';
$text .=        '</div>';
$text .=    '</div>';

CSS:

#block-menu-bar-button{
     float:right; 
     display:inline-block; 
     overflow:hidden;
}
.block-menu{
     position:relative; 
     width:70%; 
     text-align:left; 
     margin:auto; 
     padding:15px 0;
}
a.block-menu-item, div.block-menu-item{
     display:inline-block; 
     margin:0 20px; 
     padding:2px 0;
     border-bottom: 2px solid transparent;
     cursor:pointer;
}

I'm interested in alternatives to float:right as well (not a fan of floats). I've toyed with the idea of using table-cell, but I've gotten the assumption this is bad practice. Also I've toyed with the idea of flex-boxes but they are not supported in ie8 or 9 and my site accommodates those browsers.

Answer 1

In your HTML, the floated item should be first rather than second. I don't have a great explanation why... I've just noticed in Chrome that sometimes the page renders before floats are applied, and if the element is after the rest of the content, the float never applies correctly.