Wrap the container in an element with:
float: right; position: relative; left: -50%;
On the main container, add the following:
position: relative; left: 50%;
#menu { float: right; position: relative; left: -50%; } #menu ul { position: relative; left: 50%; } #menu li { float: left; }
<div id="menu"> <ul> <li><a href="#">Link 1</a></li> <li><a href="#">This is long...</a></li> <li><a href="#">Link 3</a></li> <li><a href="#">http://www.upshots.org/</a></li> <li><a href="#">Link 5</a></li> </ul> </div>
NOTE: On responsive design, consider adding overflow:hidden to the #menu container.