using float to center

by fangunxs

HTML

<div class="wrap">
   <ul id="menu">
     <li><a href="#">Home</a></li>
     <li><a href="#">News</a></li>
     <li><a href="#">Products</a></li>
     <li><a href="#">Services</a></li>
   </ul>
 </div>

<!--Internet Explorer needs this-->
 <div class="clear"></div>

CSS

body {
   overflow: hidden;
 }
#menu {
   margin: 0;
   padding: 0.5em;
   font-family: Verdana,sans-serif;
   position: relative;
   left: -50%;
 }
 
 #menu li {
   float: left;
   list-style-type: none;
   margin: 0 0 0 0.5em;
   padding: 0.25em;
   background-color: #600;
   color: #ff9;
   border: 2px solid #f00;
 }
 
 #menu a {
   color: #ff9;
   text-decoration: none;
 }
 
 .wrap {
   float: left;
   margin-bottom: 2em;
   position: relative;
   left: 50%;
 }
 
 .clear {
   clear: left;
   height: 1px;
   margin-top: -1px;
 }