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;
}

score 12 · Accepted Answer · answered Nov 04 '11 at 14:00

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/

Zack Marrapese · Answer 2 · 2011-11-04T13:58:02.080

9

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/.

edited Nov 04 '11 at 13:58

answered Nov 04 '11 at 13:52

Zack Marrapese

11,904
9
49
69

score 3 · Answer 3 · edited May 23 '17 at 11:45

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/

edited May 23 '17 at 11:45

Community

1
1

answered Nov 04 '11 at 13:59

James Montagne

73,502
13
107
127

score 2 · Answer 4 · answered Nov 04 '11 at 13:56

2

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.

answered Nov 04 '11 at 13:56

Rob

13,342
26
40
60

1

They actually don't have margins, it's a space issue when using `inline-block`. – James Montagne Nov 04 '11 at 14:35
@JamesMontagne - Almost all elements have margin by default. – Rob Nov 04 '11 at 16:07
1

Not really, check it in firebug or inspect element in chrome, no margin. – James Montagne Nov 04 '11 at 16:46
@JamesMontagne - I suggest you do the same. Note I did not say all elements do but most or many do, including the ul in this example but I did not look into the rest of it. – Rob Nov 04 '11 at 18:25

Specifying exact percentage widths in relation to parent DIV in CSS

4 Answers4