Fill Screen with multiple DIVs

Question

Situation: I am currently working on a website-design which requires me to fill up the entire screen with 60px x 60px DIVs. They are merely like tiles on a wall except that it is required to have that many of them, because each one has to get its colour changed to a random value upon hovering.

Problem: If the monitor resolution changes, the number of DIVs changes. I realise that I need to spawn those tiled DIVs with respect to the screen size. I also realise that this might be done using javascript

Question: How can this be done?

Answer 1

i would suggest a solution witout javascript. have a container with overflow hidden. inside the square divs with float left, so they fill up:

<style type="text/css">
.container {
overflow: hidden;
height: whatever you want
width: whatever you want
}
.container .square {
float: left;
width: 60px;
height: 60px;
display: block;
}
</style>
<div class="container">
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
<div class="square"></div>
... enough of it ...
</div>

of course you can use javascript. i would recommend using a library like prototype or jquery and handle the onload and onresize events. then by by screen width and height you can calculate how many divs you need. this will probably be something like (width/60)*(height/60) or something....

Answer 2

You can set float and inline

div {
  display: inline;
  width: 60px;
  height: 60px;
  float: left;
}