co.ador Posted January 15, 2010 Share Posted January 15, 2010 <style type="text/css"> .rating { list-style:none; width:54px; height:7px; margin:0 0 0px 0; padding:0px; clear:both; position:relative; } ul.rating li { cursor: pointer; float:left; text-indent:-900em; } #starrating { margin:0; font-size:12px; font-weight:100; float:left; width:200px; } #starrating2 { margin:0; font-size:12px; font-weight:100; float:left; width:200px; } </style> <html> <div id="starrating">1 Star</div> <div id="starrating2"> <ul class="rating onestar"> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> <li class="five">5</li> <li class="total">[0]</li> </ul> </div> <div id="starrating">2 Star</div> <div id="starrating2"> <ul class="rating twostar"> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> <li class="five">5</li> <li class="total">[0]</li> </ul> </div> <div id="starrating">3 Star</div> <div id="starrating2"> <ul class="rating threestar"> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> <li class="five">5</li> <li class="total">[0]</li> </ul> </div> <div id="starrating">4 Star</div> <div id="starrating2"> <ul class="rating fourstar"> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> <li class="five">5</li> <li class="total">[0]</li> </ul> </div> <div id="starrating">5 Star</div> <div id="starrating2"> <ul class="rating fivestar"> <li class="one">1</li> <li class="two">2</li> <li class="three">3</li> <li class="four">4</li> <li class="five">5</li> <li class="total">[1]</li> </ul> </div> </html> The display below is the effect desired when floating div starrating and starrating2 1 star -------- [0] 2 star -------- [0] 3 star -------- [2] 4 star -------- [0] 5 star -------- [5] Have to say the <li> inside the ul tags are being floated to the left inside the ul tags. But now I want to float the div id starrating2 to the left of starrating id. Thanks. Quote Link to comment Share on other sites More sharing options...
otuatail Posted January 18, 2010 Share Posted January 18, 2010 you are placing starrating2 after starrating in your html code. try reversing this. You cant float left a div after the first. Desmond. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.