Как выровнять три изображения бок о бок с помощью CSS

Question

Я хочу выровнять эти три изображения бок о бок и отобразить div с меню id.

HTML

<div id="menu">...</div>  
<div class="l-grid"> 
    <ul> 
     <li class="l-col l-size1of4"> 
      <div id="location"> 
       <img alt="Tell us your locaiton" src="images\location.jpeg" /> 
      </div> 
     </li> 
     <li class="l-col l-size1of4"> 
      <div id="delivery"> 
       <img alt="Choose menu to be delivered" src="images\dial\location.jpeg" /> 
      </div> 
     </li> 
     <li class="l-col l-size1of4"> 
      <div id="payment"> 
       <img alt="Payment mode" src="images\dial\payment.jpeg" /> 
      </div> 
     </li> 
    </ul> 
</div> 

CSS

.l-col { 
    float: left; 
} 

.l-size1of4 { 
    width: 166px; 
} 

соседние кадры должны быть на странице и после основного ДИВ ид.

Answer 1

ul li.l-col Установите на display:inline-block:

.l-col{ 
    display: inline-block; 
} 

JS Fiddle:http://jsfiddle.net/mR64t/

Answer 2

Попробуйте использовать ширину для всех классов .l-Col,

li.l-col { 
      display: inline; 
     } 

или

.l-col { 
      float: left; 
      width: 166px; 
     }