Question

I can’t seem to figure out how to get 6 list items (with spacing) to horizontally align evenly across the site. The width of the page is 1000px, this is what I have…

<ul id='mp_locations'>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<style>
#mp_locations {
clear:both;
list-style:none;
padding:0;
margin:0;
width: 1000px;
}
#mp_locations li {
float:left;
width:180px;
list-style:none;
height:100px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
padding:0;
margin:0;
margin-left:10px;
width:15%;
}
#mp_locations li:first-child {
margin-left:0;
}
</style>

The issue with this is that 15% is too small but 16% is too big. Since you can’t do decimals (to the best of my knowledge) I can’t set it to a set amount. So basically, how can I get 6 boxes to line up evenly across the page?

Answer 1

Hey now define with of your id #mp_locations li 15.83%

#mp_locations li {
width:15.83%;
}

live demo http://tinkerbin.com/kzx7nX9s