Are the Decimal Places in a CSS Width 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"> </div>
    <div id="second"> </div>
    <div id="third"> </div>
</div>

Decimal places in CSS percentage

There are probably many solutions for your problem, I would suggest these:

1. Round on 2 decimals by yourself for all but one, than reduce from
   total width for last one.
2. Use table or display: table, than the
   browser will fix the widths by itself.

Are decimal pixels in css supported in multiple browsers?

Using decimal pixels is incorrect. Pixel should be a single dot on the screen. Therefore, size can only be complete with no floating numbers.
The decimal value will be used only when you will increase the zoom level and will be increased proportionaly to it.

Example: http://jsfiddle.net/x2bdrdy6/
in the example above you can see that the 50.5px is rounded upp and equals to the 51px.

#body1{
  height: 50px;
  width:100px;
  background: red;  
}

#body2{
  height: 50px;
  width:100.5px;
  background: green;  
}

#body3{
  height: 50px;
  width:101px;
  background: blue;  
}

Is decimal precision when specifying a font-size respected by all browsers?

Decimals are not rounded consistently in all browsers. The best post I could find is here: Browser Rounding

This contains a table that shows the following:

Internet Explorer 7 truncate to 2 decimal places
Internet Explorer 8 truncate to 2 decimal places
Internet Explorer 9 truncate to 2 decimal places
Internet Explorer 10    truncate to 2 decimal places
Internet Explorer 11    truncate to 2 decimal places
Firefox 3.0 truncate to 3 decimal places
Firefox 3.5 truncate to 3 decimal places
Firefox 31  truncate to 3 decimal places
Chrome 20   round to 15 decimal places
Chrome 21   round to 15 decimal places
Chrome 37   round to 13 decimal places
Safari 6 (OSX Lion) round to 15 decimal places
Safari 6.1 (OSX Mountain Lion)  round to 15 decimal places
Safari 7 (OSX Mavericks)    round to 15 decimal places
Mobile Safari 7 (iOS7)  round to 15 decimal places
Mobile Safari 8 (iOS8)  round to 15 decimal places
Chrome 36 (Jelly Bean) [Nexus5] round to 15 decimal places
Chrome 30 (KitKat) [S5] round to 15 decimal places
Android Browser 4 (Jelly Bean) [Nexus7,Nexus4,S4,S3]    round to 15 decimal places
Android Browser 4 (Ice Cream Sandwich) [Nexus,KindleFire2]  round to 15 decimal places
Android Browser 4 (Gingerbread) [S2]    truncate to 3 decimal places
Opera 12    truncate to 2 decimal places
Opera Next 24   round to 13 decimal places

Can a CSS pixel be a fraction?

Yes, you can specify fractional pixels. As this has been part of CSS since the very first version, it should be well supported by any browser that supports CSS at all.

Reference: CSS 2.1: 4.3.2 Lengths

"The format of a length value (denoted by <length> in this
specification) is a <number> (with or without a decimal point)
immediately followed by a unit identifier (e.g., px, em, etc.)."

When the elements are displayed on the screen, most browsers will naturally round the position to the nearest pixel when using 100% zoom level. On higher zoom levels you will notice that fractional pixel values are recognized.

Why use long decimal point values in CSS percentage widths?

It is required in some cases. I'm working on a site using the Twitter Bootstrap which has 6 divs stretching the full width of the site. If I just make the width of each one 16.66% a noticeable gap is left at the end, if I make the width 16.67% one of the divs is pushed onto the line below. This meant to get the divs to fill the full space, I had to set the width to 16.6667% which works perfectly in Chrome and Firefox but it seems that Safari and IE round the decimal point down to 2 places so I'm left with a gap when using them. So sometimes it might seem excessive but other times it is actually needed.

Dave

CSS Width Property

It is saying that the div #content will be 71.1702% of it's parent's width.

example:

If parent's width is 100% of screen, then #content will be 71.1702% of screen.

If parent's width is 400px, then #content will be 71.1702% of 400px.

Why can I use 1.5px as size?

"I know that 1px is the smallest unit that a computer can represent" - what does this mean?

I think there may be some confusion between different types of pixel. There are device pixels, the 'blobs' that make up a physical screen. And there are CSS pixels.

In the 'old days' often a CSS pixel and a screen pixel would match so, yes, one CSS pixel was the minimum that could be represented on the physical device.

But nowadays often several device pixels are used to represent one CSS pixel.

This means that fractions of a CSS pixel may be able to be represented with more accuracy than in the past.

Hence a CSS value such as 1.5px may get represented accurately on a device which is using say 2 physical pixels (in each direction) to represent one CSS pixel.

A warning though- different devices use different numbers of physical pixels per CSS pixel, and browsers can interpret things differently and odd little fractions of CSS pixels can get 'left behind' when the system is trying to decide how to split things.

---

Related Topics