Tile layout with CSS and HTML

Question

Without relying on tables, what would be a good solution to accomplish a tile layout such as this: that automatically adapts to the screen size of the user. That is, the whole screen should be filled by the tiles, regardless of the with and height of the resolution.

I appreciate any ideas.

~ Robert

Answer 1

Here is a working example: 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;
}

​

Answer 2

I would go with some div using absolute positionning. And specify for each tile the width/height/top/left using % unit.

Answer 3

Hint:

• Use a "content div" with 100% of width and height
• Use into the "content div" two divs: one for the left column and one for the right one. Remember to give those "%" dimension (to "content" div also)
• Remember that a floated right div have to come BEFORE a left floated div

With this three point, you should be able to try yourself.