title: CSS 'float' vs. 'inline-block' in an unordered list
body: <p>i am struggling with the CSS of an unordered list which i want to use in order to provide links to a number of online profiles. the list is displayed in the footer of every page, like so (bottom right): <a href="http://www.alexbrunner.com" rel="nofollow">http://www.alexbrunner.com</a>.</p>
  
  <p>my understanding is the following:</p>
  
  <ul>
  <li>either, i make use of the CSS property 'display:inline-block;' - but given its relatively poor cross-browser support i would prefer not to.</li>
  <li>or, i float the list and define the 'inline'-characteristic on the ul-level - here, however, is where my trouble begins.</li>
  </ul>
  
  <p>if i float the li-elements left, it is obviously positioned on the wrong side of the text. if i float the li-elements right, obviously each item is floated to the right of the following item, which results in my list being <strong>displayed in the reverse order</strong>.</p>
  
  <p>the html is: </p>
  
  <pre><code>&lt;div id="footer-right"&gt;
  &lt;p&gt;E-mail me at mail@alexbrunner.com&lt;br /&gt;or visit my profiles at &lt;ul id="profiles"&gt;
      &lt;li&gt;&lt;a href="http://www.facebook.com/alexbrunner" target="_blank"&gt;&lt;img src="../images/icons/16/facebook_bw.png" class="profile" alt="Facebook" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="https://plus.google.com/u/0/109422064867262895187/about" target="_blank"&gt;&lt;img src="../images/icons/16/googleplus_bw.png" class="profile" alt="Google plus" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="https://www.xing.com/profile/Alex_Brunner7" target="_blank"&gt;&lt;img src="../images/icons/16/xing_bw.png" class="profile" alt="Xing" /&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="http://at.linkedin.com/in/abrunner/en" target="_blank"&gt;&lt;img src="../images/icons/16/linkedin_bw.png" class="profile" alt="Linkedin" /&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the css is:</p>
  
  <pre><code>#footer-right { float:right; width:17em; border:0; border-top:1px dotted #333; text-align:right; margin:0; padding:1.25em 0; }
  .profile { width:1em; height:1em; margin-left:0.3em; }
  #footer-right p { display:inline; font-size:.75em; color:#666; }
  #footer-right ul { display:inline; margin:0; padding:0; }
  #profiles li { float:right; list-style:none; }
  </code></pre>
  
  <p>of course, i could just reverse the order in my html document and start with the last - but i really want to figure out what is the semantically correct way of doing this. i am sure there is a better way than what i have applied and i would really appreciate any comments on this.</p>
  
  <p>eventually i want to put all those icons in a sprite - but i figure i have to solve this issue here first.</p>
  
  <p>thank you!</p>
  
  <p>best,
  alex</p>