Question

If you have a parent container set to width: 100% and you have sections within that are all supposed to be equal, but the percentage is an odd number, like 16.666667%, how do you ensure it displays correctly with no breaks? What’s the limit to decimal places?

Example:
You have

<ul>
     <li>One
     <li>Two
     <li>Three
     <li>Four
     <li>Five
     <li>Six
</ul>

and the ul has a width of 100%, all the li are floated left. Now dividing 100 by 6 you get 16.66666666667%. If i wanted a border-right: 1px solid black; how do you factor these things in with the CSS? I can understand it’s all math, but you can’t minus 1px from a percentage (as far as I can imagine, maybe you can…)

So how do you do these things? Thanks!

Answer 1

Hey i think you want this you can define your ul display:table and define you ul li to display:table-cell; as like this

Css

div{
width:500px;
    border:solid 1px red;
    margin:0 auto;

}

ul{
width:100%;
    background:green;
    display:table;

}

ul li{
display:table-cell;
    border-right:solid 1px white;
    padding:10px;
}
ul li:last-child{border:none;}
​

HTML

<div>
<ul>
    <li>One</li>
     <li>Two</li>
     <li>Three</li>
     <li>Four</li>
     <li>Five</li>
     <li>Six</li>
</ul>
</div>
​

Live demo http://jsfiddle.net/rohitazad/gjutz/1/