title: float un-ordered list items(ul) next to one another
body: <p>I wanna place two child un-ordered lists side by side.
  They are having Class Names L and R</p>
  
  <p>Heres the relevant part of the HTML markup.</p>
  
  <pre><code>&lt;ul class="SearchResult"&gt;
  &lt;li class="Pagination"&gt;
  &lt;a id="lnkPageNumber_top_1" class="ACTIVE" onclick="ShowPage(this.id);" style="cursor: pointer;"&gt;1&lt;/a&gt;
  &lt;a id="lnkPageNumber_top_2" onclick="ShowPage(this.id);" style="cursor: pointer;"&gt;2&lt;/a&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;ul class="L"&gt;
  &lt;li style="border: medium none ;"&gt;
  &lt;/li&gt;
  &lt;li class="Pagination"&gt;
  &lt;a id="lnkImagePageNumber_1" class="ACTIVE" onclick="ShowImage(this.id);" style="cursor: pointer;"&gt;1&lt;/a&gt;
  &lt;a id="lnkImagePageNumber_2" onclick="ShowImage(this.id);" style="cursor: pointer;"&gt;2&lt;/a&gt;
  &lt;a id="lnkImagePageNumber_3" onclick="ShowImage(this.id);" style="cursor: pointer;"&gt;3&lt;/a&gt;
  &lt;a id="lnkImagePageNumber_4" onclick="ShowImage(this.id);" style="cursor: pointer;"&gt;4&lt;/a&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;ul class="R"&gt;
  &lt;li class="T"&gt;Rose Villa&lt;/li&gt;
  &lt;li&gt;
  &lt;span&gt;
  &lt;strong&gt;Price&lt;/strong&gt;
  : Rs. 2,000,000
  &lt;/span&gt;
  &lt;/li&gt;
  &lt;li&gt;
  &lt;strong&gt;Features&lt;/strong&gt;
  :
  &lt;img height="16" width="16" src="bed.png" alt="Beds:" title="Bedrooms"/&gt;
  3
  &lt;img height="16" width="16" src="bath.png" alt="Baths:" title="Bathrooms"/&gt;
  3
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>The styleSheet applied is this</p>
  
  <pre><code>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; }
  </code></pre>
  
  <p>But the side by side alignment is not working at all.
  What could be wrong?
  h?
  P.S: and yeah, I saw <a href="https://stackoverflow.com/questions/93625/float-divs">floating divs in list items</a>
  Its DIV mentioned there and ul here. Is "clear:left" applicable for bot?</p>
  
  <p>It may be duplicate post for experts in CSS, but I am not. So please bear with it [:)]</p>
  
  <p>Edit Note:- To explain the stuff in detail heres an image
  <a href="http://www.yetanothercoder.com/img.jpg" rel="nofollow noreferrer">alt text http://www.yetanothercoder.com/img.jpg</a></p>