Tile layout with CSS and HTML - 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.

Answer 4

Disclaimer
This will not mean the needs of your project. That has been answered alread by other uses.
For future reference, I would look into an oocss-approach to layout classes. You may have pages that have a different amount of tiles, etc. I use the following for my projects.
Tiles Object
Used for creating tile layouts.
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>
Dock Object
Docks content to the edge of the screen.
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?
Other Ones
I would look at the Tiles object in the Metro UI Framework. They allow for heights
http://metroui.org.ua/
If you are looking for a good layout system that uses proportions:
https://github.com/stubbornella/oocss/wiki/Grids