Specifying exact percentage widths in relation to parent DIV in CSS

Question

I am attempting to create a visual element using DIV elements and CSS which should display data in the format demonstrated below.

[-----50%-----|--25%--|--25%--]

When using the code and CSS I've specified below, my final element always spills onto the next line and the CSS percentage values I'm specifying don't seem to create the layout properly.

Could anybody suggest a better way to do this?

My HTML

<div class="visual-indicator-title">
All Items</div>
<div class="visual-indicator-holder">
<div class="vi-internal-element" style="width: 25%; background-color: #5E9BD1;">
    25%</div>
<div class="vi-internal-element" style="width: 25%; background-color: #AB884D;">
    25%</div>
<div class="vi-internal-element" style="width: 50%;">
    50%</div>
</div>
<div class="visual-legend">
<ul class="inline-block">
    <li>
        <div class="legend-blue">
        </div>
        Sales</li>
    <li><span class="legend-tan"></span>Processed</li>
    <li><span class="legend-grey"></span>Pending Processing</li>
</ul>

My CSS

.visual-indicator-title{
font-size:12px;
font-weight:bold;
color:#777777;
}
.visual-indicator-holder
{
width:100%;
background-color:#666666;
height:28px;
border-radius: 8px;
}
.visual-indicator-holder .vi-internal-element
{
font-size:11px;
text-align:center;
color:#ffffff;
background-color:#777777;
border-radius: 6px;
display:inline-block;
}

Answer 1

The reason this happens is that with inline or inline-block, white space in the element will affect the rendering (adds space). Here is your demo working with white space removed, no changes to the CSS: http://jsfiddle.net/fZXnU/

Removing white space is not trivial though, so you'd be better off floating the elements (which triggers display:block). Working demo with plenty of white space: http://jsfiddle.net/fZXnU/1/

Answer 2

You can use float: left, position: relative, and then define width in percentage as you are.

I modified your code to use float here: http://jsfiddle.net/Z3kdP/.

Answer 3

If you remove the white-space between the divs then it works as intended.

http://jsfiddle.net/TeJuU/

---

EDIT: See this question: How to remove the space between inline-block elements?

You can make font-size: 0 on the parent element if you don't want to edit your html.

http://jsfiddle.net/TeJuU/1/

Answer 4

All of those elements have margin and padding with them as well as the percentages creating rounding errors during calculation. So you need to make sure you set, or take into consideration, what margin is doing to this. For rounding errors, it's typical to let the percentages add up to something less than 100% but then add margin: auto to center the whole thing.