This is going to be difficult to explain but hopefully there will be a CSS ninja or two who can help me out.
Basically, I want to create a grid of square DIVs (imagine the Windows 7 phone metro interface), which stretches to fit the screen using percentages and has equal gaps horizontally and vertically between the squares.
It sounds quite easy but I really can’t work it out.
Let me give an example. If the screen is 1000px wide and has 5 squares horizontally then I could make each one about 18% wide (180px each, total 90%), leaving 10% for the gaps between them but…
1) How to float each DIV so that there is no gap on the left or right of the screen but 2.5% gap horizontally between each square?
2) How to create a proportional vertical gap to match the horizontal gap between squares as the screen is resized?
3) How to ensure that each DIV remains a square, so the height is exactly proportional the the width which is a percentage of the width of it’s container.
Am I thinking about this all wrong? Very confused.
Any help would really be appreciated.
The answer I found in the end was to use a transparent square image. If you make it x pixels wide then it will automatically be resized by the browser to make it x pixels tall. Obviously it’s containing div will also scale accordingly 🙂