What's the best way to split a width: 100% parent container into sections with decimals?
-
02-06-2021 - |
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!
Solution
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/