CODEWITHSUNDEEP
csswidthpercentagecalc
user1322720
user1322720

Reputation:

Calculating width in percentage using calc()

I want to calculate the width of an element:

CSS:

#progressbar {
    width: 100%;
    background-color: #DDD;
    }
#progress {
    width : calc(100% / 14 * 5);
    background-color: green;
    color: white;
    text-align: right;
    white-space: nowrap;
    padding: 0.3em 0.5em 0.2em;
    margin-right: 0.5em;
    }

HTML:

<p id="progressbar"><span id="progress">Tag 5</span>von 14</p>

This is an exact replication of many examples that I find on the web, yet it does not work (in the most recent version of Firefox) and does not validate (on https://jigsaw.w3.org/css-validator/):

enter image description here

The code works (but still doesn't validate) when I use DIVs instead of P and SPAN.

What's wrong?

Firebug tells me that the width has been correctly calculated (as 35.7%), but it is not being applied to the element:

enter image description here

Upvotes: 1

Views: 4652

Answers (1)

Harun Koca&#231;alışkan
Harun Koca&#231;alışkan

Reputation: 29

Adding float:left to your css class will solve your problem. 

#progress {
width : calc(100% / 14 * 5);
background-color: green;
color: white;
text-align: right;
white-space: nowrap;
padding: 0.3em 0.5em 0.2em;
margin-right: 0.5em;
float:left;
}

Upvotes: 1

Related Questions