How to specify exact location and size of div in cm

Question

I want to have a div show up in the top right corner of the page so that is can exactly correspond to the location of a paper label when I print it.

Here is what I'm trying, and it's not working.

<div style="background-color: lightgrey; position: fixed; height: 5.1cm; width: 8.8cm; right: 0.6cm; top: 2.2cm;">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit
</div>

The rectangle should be 0.6 cm from the right edge of the page and 2.2 cm from the top. Instead it is about 4 cm from the top and about 5cm from the right.

How can I set the size and location in cm so that this rectangle shows up in the top right>

EDIT: Here is what I'm getting. The yellow is the margin. You can see the the grey box is very far from the top and right.

You're missing a semicolon between these two rules `width: 8.8cm right: 0.6cm;` — j08691, Jul 31 '17 at 17:25
There is a rogue double quote at the end of the div, probably a typo — Huangism, Jul 31 '17 at 17:27
It probably got removed since we edited the question at about the same time. — j08691, Jul 31 '17 at 17:35
How can I get the div to be 0.6cm from the right edge of the page? — Jeff Wolski, Jul 31 '17 at 17:37
Just held a ruler at my screen, I get a precise 2.2cm and 0.6cm. The issue is not in your code. — Siguza, Jul 31 '17 at 17:37
Exact placement is going to depend a lot on your printer, I'm guessing it's adding some margin to the page when you print it? Would probably be located slightly differently depending on which browser you printed from as well. — Nicholas Hirras, Jul 31 '17 at 17:45
The number of pixels in a centimeter is defined by the display, not the code. See [this question and its answers for more](https://stackoverflow.com/q/10794891/215552), and [also this one for some code that can detect how many device pixels are in a unit of measurement](https://stackoverflow.com/q/9292156/215552) — Heretic Monkey, Jul 31 '17 at 17:47
Does this apply to print or just web? If you are printing, then user set margins of the page will affect what you are trying to do. Some printers can't even print edge to edge on a piece of paper — Huangism, Jul 31 '17 at 17:49
Is your image how it displays on screen, or a PDF of how it prints? — Jacob Ford, Jul 31 '17 at 17:52
Also what browser, and what is your doc mode? And if IE, is it in compatibility mode? — Nicholas Hirras, Jul 31 '17 at 17:53

score 0 · Answer 1 · answered Jul 31 '17 at 17:44

0

The issue may be that your label printer is unable to print to the edge of the label, so it scales your artwork down to a printable area with padding around the edge of the label.

I don't know enough about your printer to diagnose, but see if there are any options like "100% scaling" or "no scaling" available.

answered Jul 31 '17 at 17:44

Jacob Ford

4,553
5
27
42

1

You could diagnose by simply applying `body { margin: 0; border: solid 1px #000; }`... – Siguza Jul 31 '17 at 17:46

score 0 · Answer 2 · answered Jul 31 '17 at 18:27

0

It may depent your browser So try different values for height width and margins

answered Jul 31 '17 at 18:27

Sumithran

6,217
4
40
54

How to specify exact location and size of div in cm

2 Answers2