Question

I would like to split the window in 4 equal parts. In each part I want a picture which is both aligned vertically and horizontally, a bit like here.

The problem is that when I remove one of the pictures, I don’t want to other pictures to use that removed picture’s space, like here

Answer 1

Fiddle: http://jsfiddle.net/TFCM4/8/

Create 4 divs inside a container (#bgs), and add descriptive class names to the elements.

Relevant CSS:

html, body { /* Prevent "borders" from appearing */
    padding: 0;
    margin: 0;
}
#bgs { /* Let the container fill the whole window */
    width: 100%;
    height: 100%;
}
#bgs > div { /* Set the height and width of each div to 50% */
    width: 50%;
    height: 50%;
}
.right {float: right;} /* Align to the right */
.left {float:left;} /* Align to the left */
img {
    display: block;
    height: 100%; /* Let the image stretch/shrink when necessary*/
    width: 100%;
}

HTML:

<div id="bgs">
    <div class="top left">
        <img src="http://farm7.static.flickr.com/6235/6257586214_7989986f50_z.jpg" />
    </div>
    <div class="top right">
        <img src="http://farm7.static.flickr.com/6235/6257586214_7989986f50_z.jpg" />
    </div>
    <div class="bottom left">
        <img src="http://farm7.static.flickr.com/6235/6257586214_7989986f50_z.jpg" />
    </div>
    <div class="bottom right">
        <img src="http://farm7.static.flickr.com/6235/6257586214_7989986f50_z.jpg" />
    </div>
</div>

I’ve only used the left and right class names. The top and bottom have been added to make the source look more readable.

---

Previous (table) approach:

Add visiblity:hidden; to the images which should be hidden. This property makes the element invisible, but keeps the spot “reserved”.

Fiddle: http://jsfiddle.net/TFCM4/2/

Instead of using two tables, you can merge the tables to one table, and achieve the desired result without messing further. Fiddle: http://jsfiddle.net/TFCM4/3/

HTML structure:

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>