Question

Please consider the following: http://jsfiddle.net/CASM6/9/

I have two rows of tabs. there are two tabs in the first row and 3 tabs in the second row. I want all these tabs to neatly fall inside one rectangle, with the outer borders to match perfectly. If there were no borders, this would be easy. The width for the upper tabs would be 50%, and the width for lower tabs would be 33.333333%. But the lower tabs have borders. And the width of these borders messes things up. How do I achieve the desired result? Thanks!

Answer 1

This is probably not what you want to hear, but if you want to mix percentages and px you will have the easiest time by adding an extra wrapper element. That is, if you want to be accurate.

I wrapped your li content in a div, and set the border on the div instead.

Demo: http://jsfiddle.net/CASM6/13/

<ul>
    <li id='left-btm'><div>Bottom 1</div></li>
    <li><div>Bottom 2</div></li>
    <li id='right-btm'><div>Bottom 3</div></li>
</ul>  

#bottom li {
    background-color:red;
    width:33.33%; /* as close as we can get to 1/3... */
}

#left-btm div, #right-btm div
{
    border-left-color:black;
    border-right-color:black;   
    border-left-width:medium;
    border-right-width:medium;
    border-left-style:solid;
    border-right-style:solid;
}

• Here it is with a 50em http://jsfiddle.net/CASM6/21/
• Here it is with a 3em container: http://jsfiddle.net/CASM6/20/
• And a 49% container: http://jsfiddle.net/CASM6/19/

Besides that 0.1% leftover from splitting the container into imperfect thirds, the layout is pixel perfect in each example. You can compensate for that by setting a background-color on the container that matches the border.

You can fiddle around with fractions of ems and percentages all day, but you can never get them perfect because they are relative widths, unlike px. This might work if you know the exact pixel width of your container, but then if that’s the case you could have just used px unites to measure everything. This method ensures accuracy at any width.