Ответ 1

Вот рабочий пример: jsfiddle

Html:

<div class="container">
<div class="first">first</div><div class="third">third</div>
<div class="second">second</div><div class="fourth">fourth</div><div class="last">last</div>
</div>​

CSS

html, body, .container
{
    height: 100%; 
    min-height: 100%;
}

.first {
    float: left;
    width: 20%;
    height: 30%;
    background-color: red;
}

.second{
    float: left;
    width: 20%;
    height: 70%;
    background-color: green;
}


.third{
    float: right;
    width: 80%;
    height: 80%;
    background-color: blue;
}

.fourth {
    float: right;
    width: 40%;
    height: 20%;
    background-color: #DDDDDD;
}

.last{
    float: right;
    width: 40%;
    height: 20%;
    background-color: yellow;
}

Ответ 2

Я бы пошел с некоторым div, используя абсолютное позиционирование. И укажите для каждой плитки ширину/высоту/верхнюю/левую часть с помощью %.

Ответ 3

Подсказка:

• Используйте "content div" со 100% ширины и высоты
• Используйте в "div div" два div: один для левого столбца и один для правильного. Не забудьте указать значение "%" (также для "content" div)
• Помните, что плавающий правый div должен прибыть ПЕРЕД левой плавающей div

С этими тремя моментами вы сможете попробовать себя.

Ответ 4

Отказ

Это не будет означать потребности вашего проекта. На это ответили другие запросы.

В будущем, я бы рассмотрел oocss-подход к классам макетов. У вас могут быть страницы с разным количеством плиток и т.д. Для моих проектов я использую следующее.

Объект плитки

Используется для создания макетов плитки.

CSS

.tiles
{
    display: block;
}

.tiles__item
{
    display: block;

    height: auto;

    float:left;
}

.tiles--2
{
    margin-left: -4%;
}

.tiles--3
{
   margin-left: -2%;
}

.tiles--4
{
    margin-left: -2%;
}

.tiles--2 .tiles__item
{
    margin-left: 4%;

    width: 46%;
}

.tiles--3 .tiles__item
{
    margin-left: 2%;

    width: 31.3%;
}

.tiles--4 .tiles__item
{
    margin-left: 2%;

    width: 23%;
}

HTML

<div class="tiles tiles--2">

    <div class="tiles__item">

    </div>

    <div class="tiles__item">

    </div>

</div>

Объект док-станции

Док-контент до края экрана.

CSS

.dock 
{
    position: absolute;

    height: auto; 

    width: auto;
}

.dock--t
{
    width: 100%;

    top: 0;
}

.dock--b
{
    width: 100%;

    bottom: 0;
}

.dock--l
{
    height: 100%;

    left: 0;
}

.dock--r
{
    height: 100%;

    right: 0;
}

HTML

<div class="dock dock--t">

    The content will be docked to the top of the screen.

</div?

Другие люди

Я бы посмотрел на объект Tiles в Metro UI Framework. Они позволяют высоты

http://metroui.org.ua/

Если вы ищете хорошую систему макета, которая использует пропорции:

https://github.com/stubbornella/oocss/wiki/Grids