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

12,072
9
51
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

77,516
14
110
130

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

14,746
28
47
65

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

score -1 · Answer 5 · edited Jul 20 '23 at 10:39

-1

You can use my code.

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

edited Jul 20 '23 at 10:39

Albert Einstein

7,472
8
36
71

answered Jul 20 '23 at 10:30

Joshua Sanjuan

11
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Jul 24 '23 at 10:50

Specifying exact percentage widths in relation to parent DIV in CSS

5 Answers5