Tiling 9 images in a square in a div... Current way? [closed]

Question

I'm trying to display 9 square images in a 3x3 grid. I'd like to be able to stretch the bounding box of the overall 3x3 square, thus stretching each of the tiles.

My solution would involve tables - I suppose that's shunned upon nowadays? What would be the right way to do this among modern and current-generation browsers?

Please be kind - the last time I did frontend dev, tables were in fashion and it wasn't quite Y2K.

Answer 1

Here is an example of 3x3 fluid squares. That changes when the height or width are changed.

<div id="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

Css:

html, body{
    width:100%; 
    width:100%; 
    margin:0; 
    padding:0;
}

#container {
    width:100%; 
    height:100%;
}
.square{ 
    border:1px solid #000;         
    padding-bottom: 30%; 
    height: 0;
    width:30%; 
    margin:1%; 
    float:left; 
    display:block;
}

And a working Fiddle

---

On suggestion of danrhul a working DEMO with <ul>