Div width in cm (inch)

Question

I need to put in my site div which is exactly 25cm width ( 10 inch) in every display. How I can do it ?

Answer 1

How I can do it ?

You can't. Update: apparently, you can on many modern systems: Check out @Tomas's answer. It seems not to be always entirely reliable, though.

Old answer: You can't. Monitors display different numbers of pixels. The pixel size varies wildly from monitor to monitor.

There are ways to interpolate the pixel size if you know the monitor size. This information is sometimes available to the operating system; however, it is impossible for a web site to get hold of this information.

The only way to go would be to have the user do a calibration. For example, ask the user to hold an A4 piece of paper to the monitor, and use a draggable ruler to determine the area it covers. Using that information, you can then calculate how many pixels you will need to show 25 centimeters.

Update: @Tomas claims in his answer that using CSS cm values works on screen.

This is in fact true on my Windows 7 and 23" Plug&Play TFT Monitor (1920x1080 Pixels): 21cm translates perfectly to the short side of a A4 sheet of paper in Chrome 7, IE6(!), IE7, Firefox 3.6.

It doesn't seem to be entirely reliable, though: @Yi Jiang can't get it to work on a TFT using Ubuntu Linux; also, older Monitors may not send through their size information so it'll be impossible for the OS to determine a correct size.

Here's a simple JSFiddle for testing.