CSS/PHP Fill Screen with divs

Question

I am trying to fill the screen with divs, and I'm thinking about using php to dynamically resize the divs based on the screen resoultion, so, for example, 16 divs always appear in each row.

Example A is the problem, in Example BI resize the divs to fit the screen.

So, is this efficient? I would have something like this for each background image of each div:

/bgimage.php?id=123456&resize=125

Where resize is calculated by dividing the browser width by 16, or the # of divs I want in each row.

I'm not sure about using this method, because I don't want the divs to appear to small if the resolution is very low.

Any other suggestions? Could this be done better using just CSS or javascript? The

Answer 1

I don't see why you need any scripting in any language?

If you set every div to float left with a width of 6% then 16 divs will take up 96% of the width no matter what the screen is resized to. You can wrap them in another div with a 4% margin to handle the remaining 4%.

Answer 2

You can do this in CSS alone. Simply set the width of the div to 6.25% (100/16), and then set a min-width for that smallest possible width.

http://jsbin.com/ozuxa4