Размещать неупорядоченные элементы списка (ul) рядом друг с другом

Я хочу разместить два дочерних неупорядоченных списка рядом. У них есть имена классов L и R

Вот соответствующая часть разметки HTML.

<ul class = "SearchResult">
<li class = "Pagination">
<a id = "lnkPageNumber_top_1" class = "ACTIVE" onclick = "ShowPage(this.id);" style = "cursor: pointer;">1</a>
<a id = "lnkPageNumber_top_2" onclick = "ShowPage(this.id);" style = "cursor: pointer;">2</a>
</li>
<li>
<ul class = "L">
<li style = "border: medium none ;">
</li>
<li class = "Pagination">
<a id = "lnkImagePageNumber_1" class = "ACTIVE" onclick = "ShowImage(this.id);" style = "cursor: pointer;">1</a>
<a id = "lnkImagePageNumber_2" onclick = "ShowImage(this.id);" style = "cursor: pointer;">2</a>
<a id = "lnkImagePageNumber_3" onclick = "ShowImage(this.id);" style = "cursor: pointer;">3</a>
<a id = "lnkImagePageNumber_4" onclick = "ShowImage(this.id);" style = "cursor: pointer;">4</a>
</li>
</ul>
<ul class = "R">
<li class = "T">Rose Villa</li>
<li>
<span>
<strong>Price</strong>
: Rs. 2,000,000
</span>
</li>
<li>
<strong>Features</strong>
:
<img height = "16" width = "16" src = "bed.png" alt = "Beds:" title = "Bedrooms"/>
3
<img height = "16" width = "16" src = "bath.png" alt = "Baths:" title = "Bathrooms"/>
3
</li>
</ul>
</li>
</ul>

Применяемая таблица стилей - это

ul.SearchResult { width:100%; list-style:none; }
ul.SearchResult li { margin:2px; height:200px; border:solid 1px #B5D335;clear:left; }
ul.SearchResult img { padding:0px; margin:0px; width:235px; height:156px; border:none }
ul.SearchResult li.Pagination { padding:5px; height:auto; }
ul.SearchResult li.Pagination a { color:#669900; font-weight:bold; }
ul.SearchResult li.Pagination a:hover { color:#FF9900; }
ul.SearchResult li.Pagination a.ACTIVE { color:#FF9900; border:solid 1px #B5D335; padding-left:3px; padding-right:3px; }
ul.SearchResult li ul {float:left; list-style:none; }
ul.SearchResult li ul.L { width:245px;} /* Set as Television set BG */
ul.SearchResult li ul.R { width:292px;}
ul.SearchResult li ul li { padding:3px; border:none; height:auto; border-bottom:dotted 1px #C9C9C9; }
ul.SearchResult li ul li.T { text-transform:uppercase; color:#44962A; font-weight:bold }
ul.SearchResult li ul li span { display:table-cell; min-width:125px; width:auto; }
ul.SearchResult li ul li a { color:#44962A; }
ul.SearchResult li ul li a:hover { color:#FF9900; }

Но выравнивание бок о бок вообще не работает. Что могло быть не так? час? P.S: и да, я видел плавающие div в элементах списка Его DIV упоминается там и ul. Применимо ли "clear: left" к боту?

Это может быть дубликат поста для экспертов по CSS, но я нет. Так что терпите, пожалуйста [:)]

Изменить примечание: - Чтобы подробно объяснить материал, вот изображение альтернативный текст http://www.yetanothercoder.com/img.jpg