1. CSS: box-sizing=‘border-box’

CSS box-sizing specify two bordered boxes side by side. 1 of its property is border-box: The width and height properties (and min/max properties) includes content, padding and border, but not the margin. Here is an example:

<style>
div.container {
    width: 300px;
    border: 1px solid;
}
div.box {
    width: 150px;
    border: 3px solid coral;
    float: left;
    padding: 10px;
}
</style>
<div class="container">
  <div class="box" id="box1">This is BOX1.</div>
  <div class="box" id="box2">This is BOX2.</div>
  <div style="clear:both;"></div>
</div>

Two 150 pixels boxes inside a 300 pixels container. It should fit nicely, but because of the borders and padding, the two boxes take up more space than 150 pixels each. This “problem” can be solved by setting the box-sizing property to “border-box”.

//document.getElementById("box1").style.boxSizing = "border-box";
var boxes = document.getElementsByClassName('box');
for(var i=0;i<boxes.length; i++) {
  boxes[i].style.boxSizing = 'border-box';
}

2. CSS3 @media

With a @media query, you can write different CSS code for different media types. Here is an example - Change the background-color if the document is smaller than 300 pixels wide:

@media screen and (max-width: 300px) {
    body {
        background-color:lightblue;
    }
}

Shrinking the screen shows the color will change.

3. CSS: Flexbox

According to A Complete Guide to Flexbox: The Flexbox Layout (Flexible Box) module (currently a W3C Candidate Recommendation) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word “flex”).

1. A good example of layout is at:
   Holy Grail Layout example 3 columns Layout example
2. A good resource article is:
   Using CSS flexible boxes