Странное поведение с плавающей точкой: право и CSS парения

Question

У меня есть эта страница http://myrender.altervista.org/show2.html

я переехал 5 кнопок в правом углу с float:right инструкцией, а затем парить в этих кнопок перестали работать suddently (до float:right его работал).

Существует HTML-:

<div class="container"> 
    <div class="imgcontainer"> 
     <div class="latest">Ultimi Caricamenti</div> 
     <img class="imgslide" src="" /> 
    </div> 
    <div class="buttondiv"> 
     <div class="button" onclick="change(0); clearInterval(t);" id="p0"></div> 
     <div class="button" onclick="change(1); clearInterval(t);" id="p1"></div> 
     <div class="button" onclick="change(2); clearInterval(t);" id="p2"></div> 
     <div class="button" onclick="change(3); clearInterval(t);" id="p3"></div> 
     <div class="button" onclick="change(4); clearInterval(t);" id="p4"></div> 
    </div> 
</div> 

и есть классы CSS (только необходимые):

.button 
{ 
    display:inline-block; 
    height:10px; 
    width:10px; 
    background:#eee; 
    border-radius:50%; 
    cursor: pointer; 
    opacity: 0.6; 
} 

.button:hover 
{ 
    opacity:1.0; 
} 

.buttondiv 
{ 
    margin-top: -17px; 
    padding-right: 5px; 
    float:right; 
} 

.buttonactive 
{ 
    background:#1390cd; 
    opacity:0.8; 
} 

.container 
{ 
    width:592px; 
    height:183px; 
} 

Заранее спасибо: D

Answer 1

Просто добавьте position: relative; в .buttondiv или до .button