Question

Something I’ve been wondering for a while whilst doing CSS design.

Are decimal places in CSS widths respected? Or are they rounded?

.percentage {
  width: 49.5%;
}

or

.pixel {
  width: 122.5px;
}

Answer 1

If it’s a percentage width, then yes, it is respected:

#outer {
    width: 200px;
}

#first {
    width: 50%;
    height: 20px;
    background-color: red;
}

#second {
    width: 50.5%;
    height: 20px;
    background-color:green;
}

#third {
    width: 51%;
    height: 20px;
    background-color:blue;
}

<div id="outer">
    <div id="first">&nbsp;</div>
    <div id="second">&nbsp;</div>
    <div id="third">&nbsp;</div>
</div>

As Martin pointed out, things break down when you get to fractional pixels, but if your percentage values yield integer pixel value (e.g. 50.5% of 200px in the example) you’ll get sensible, expected behaviour.

Edit: I’ve updated the example to show what happens to fractional pixels (in Chrome the values are truncated, so 50, 50.5 and 50.6 all show the same width.)

#percentage {
    width: 200px;
    color: white;
}

#percentage .first {
    width: 50%;
    height: 20px;
    background-color: red;
}

#percentage .second {
    width: 50.5%;
    height: 20px;
    background-color:green;
}

#percentage .third {
    width: 51%;
    height: 20px;
    background-color:blue;
}

#pixels {
    color: white;
}

#pixels .first {
    width: 50px;
    height: 20px;
    background-color: red;
}

#pixels .second {
    width: 50.5px;
    height: 20px;
    background-color:green;
}

#pixels .third {
    width: 50.6px;
    height: 20px;
    background-color:blue;
}

#pixels .fourth {
    width: 51px;
    height: 20px;
    background-color:red;
}

<div id="percentage">
    <div class="first">50%=100px</div>
    <div class="second">50.5%=101px</div>
    <div class="third">51%=102px</div>
</div>
<br />
<div id="pixels">
    <div class="first">50px</div>
    <div class="second">50.5px</div>
    <div class="third">50.6px</div>
    <div class="fourth">51px</div>
</div>