Layout with CSS3 - HTML5 and CSS3 - page 285

This CSS creates two boxes that are exactly the
same size visually, despite differing in width and
height by 50 pixels:

#one {
box-sizing: content-box;
width: 150px;
height: 150px;
border: 25px solid black;
}
#two {
box-sizing: border-box;
width: 200px;
height: 200px;
border: 25px solid black;
}
The markup required is

<div id="one"></div>
<div id="two"></div>

This feature isn't as obviously useful now that
you have calc , but it might save you some effort
if you want a set of elements to have the same
size but different-width borders.

You've now learned about all the currently viable techniques for layout
with CSS. But even with all these tools, it's a challenge to design a single
layout that works well on powerful desktop PCs, portable tablets, and
mobile phones. Media queries allow you to tailor your layouts to the
capabilities of the device, as you'll learn in the next section.

Using media queries for flexible layout
CSS has long had the ability to apply different styles based on the out-
put device, whether it's a PC screen, a handheld device, or a printer.
For instance, a print stylesheet can be applied to an HTML document
in several ways.

<link rel="stylesheet" media="print" href="print.css">

Linking from HTML

<style media="print"></style>

Embedding in HTML

@media print { }

Inline in CSS