Question

Is it possible to build such a layout with CSS alone?

I’ve built this style layout many-a-time using a combination of jQuery and CSS. Calculating the page width and deducting element widths and heights. Re-calculating these widths and heights within the resize event, but it just feels so dirty, and it’s not very smooth on mobile devices.

Answer 1

Try this: (assuming <div id="box1">, <div id="box2">, <div id="box3">)

#box1, #box2, #box3 {
    position: fixed;
    left:0; top:0; right:0; bottom:0;
    padding:20px;
}
#box1 {
    bottom:80%; /* 100 - 20 */
    border: 5px solid blue;
}
#box2 {
    top:20%;
    right:70%; /* 100 - 30 */
    border: 5px solid red;
}
#box3 {
    top:20%;
    left:30%;
    border: 5px solid lime;
}