Jak zachować dwa elementy div na tej samej linii?

Question

Pracowałem nad rozwijanym menu podobnym do suckerfish. Mam działającą teraz stronę rozwijaną, ale mam kilka obrazów, które próbuję umieścić po obu stronach łączy. W tej chwili używam div rozmiaru obrazu, a następnie ustawiam właściwość background-image dla potrzebnego obrazu (aby mogła się zmienić za pomocą klasy pseudo: hover).

Oto CSS Dotyczy:

ul#menu3 li { 
    color: #000000; 
    float: left; 
    /*I've done a little playing around here, doesn't seem to do anything*/ 
    position: relative; 
    /*margin-bottom:-1px;*/ 

    line-height: 31px; 
    width: 10em; 
    padding: none; 
    font-weight: bold; 
    display: block; 
    vertical-align: middle; 
    background-image: url(../../images/dropdown/button-tile.gif); 
} 
.imgDivRt { 
    width: 20px; 
    height: 31px; 
    display: inline; 
    float: right; 
    vertical-align: middle; 
    background-image: url(../../images/dropdown/button-right.gif); 
} 
.imgDivLt { 
    width: 20px; 
    height: 31px; 
    display: inline; 
    float: left; 
    vertical-align: middle; 
    background-image: url(../../images/dropdown/button-left.gif); 
}  

używałem selektorów aby zaoszczędzić trochę o różnych klas, ale Internet Explorer nie wydają się wspierać ich :(

Tutaj jest mój HTML, który dotyczy:

<li><div class="imgDivLt"></div>Option 1<div class="imgDivRt"></div> 
<ul> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 1<div class="imgDivRt"></div></a> 
     <ul> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sandwich<div class="imgDivRt"></div></a></li> 
     </ul> 
    </li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 2<div class="imgDivRt"></div></a> 
    <ul> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 1<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 2<div class="imgDivRt"></div></a> </li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 3<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 4<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 5<div class="imgDivRt"></div></a></li> 
      <li><a href="#"><div class="imgDivLt"></div>Sub 6<div class="imgDivRt"></div></a></li> 
     </ul> 
    </li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 3<div class="imgDivRt"></div></a></li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 4<div class="imgDivRt"></div></a></li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 5<div class="imgDivRt"></div></a></li> 
    <li><a href="#"><div class="imgDivLt"></div>Sub 6<div class="imgDivRt"></div></a></li> 
</ul> 
</li> 
<li><div class="imgDivLt"></div>Option 2<div class="imgDivRt"></div> 

nie jestem pewien, czy nie ma usterki w moim kodu, lub jeśli jestem na niewłaściwym torze. Działa w firefoxie, safari i chromie, ale nie w IE czy operze, więc nie jestem pewien, czy nadrabiają głupotą, czy co. W idealnej sytuacji drugi obraz płynie łapczywie w prawo w bloku zawierającym. W przeglądarkach problem, to siedzi następną linię w dół (po prawej przynajmniej)

Answer 1

Można zrobić dwa DIV inline w ten sposób:

display:inline; 
float:left; 

Answer 2

Dla mnie to działało znacznie lepiej, ponieważ nie zrobił Zmniejszaj odstępy między unoszonymi przedmiotami:

display:inline-block; 

W przypadku, który pomaga każdemu.