mjb4 mjb4 - 5 months ago 11
HTML Question

Why is the styling working in px but not in cm?

I have the following HTML page its basically a shift plan. But if I switch from pixels for the screen to centimeters for the printer the width do not add up anymore and thus the rows have different width.

div.line{
white-space:nowrap;
float:left;
}

div.a0, div.a1, div.a2, div.a3{
border:0.1cm solid black;
display:inline-block;
white-space:normal;
padding:0px;
margin:0px;
}

div.b0, div.b1, div.b2, div.b3{
border:1px solid black;
display:inline-block;
white-space:normal;
padding:0px;
margin:0px;
}
div.a0{width:calc(16cm - 0.2cm);}
div.a1{width:calc(8cm - 0.2cm);}
div.a2{width:calc(4cm - 0.2cm);}
div.a3{width:calc(2cm - 0.2cm);}
div.b0{width:calc(400px - 2px);}
div.b1{width:calc(200px - 2px);}
div.b2{width:calc(100px - 2px);}
div.b3{width:calc(50px - 2px);}


for(var a=0;a<2;a++){
var b = String.fromCharCode(97 + a);
for(var c=0;c<4;c++){
var d = document.createElement("div");
d.className = "list";
for(var e=0;e<Math.pow(2,c);e++){
var f = document.createElement("div");
f.className = b + c;
f.innerHTML = b + c;
d.appendChild(f);
}
document.body.appendChild(d);
}
}


JSFiddle Example

Answer

Actually, your pixel rows also have different width (stairs effect). Try to change browser page scale (CTRL-+ in Chrome) and see that.

To make this work as you want, don't use calc at all, just use 16cm, 8cm etc, and set box-sizing: border-box; (see CSS3 box-sizing Property) for your divs.

This way border width will be included in total element width.

Fixed version of your fiddle: https://jsfiddle.net/vog8gyxr/4/

Comments