Question

I wanna place two child un-ordered lists side by side. They are having Class Names L and R

Heres the relevant part of the HTML markup.

<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> 

The styleSheet applied is this

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; } 

But the side by side alignment is not working at all. What could be wrong? h? P.S: and yeah, I saw floating divs in list items Its DIV mentioned there and ul here. Is ‘clear:left’ applicable for bot?

It may be duplicate post for experts in CSS, but I am not. So please bear with it [:)]

Edit Note:- To explain the stuff in detail heres an image alt text http://www.yetanothercoder.com/img.jpg

Answer 1

Adding a clear:none to your UL’s should sort it, so:

ul.SearchResult li ul {float:left; clear:none; list-style:none; } 

floating will position the element, but to let other elements position next to it as oppose to underneath it you need to apply the clear:none 🙂

hope this helps!