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/