Question

UPDATE: Here’s a jsFiddle.

I want it to look like this:

… but it looks like this:

The #container is horizontally centered, and must stay so. Can’t seem to get this right…

Answer 1

Bryan Downing in the comments gave me a clue.

I added

footer #container {
    position: relative;
    top: -XXXpx;
}

Works perfect. Big thanks to you wizards 🙂

This should be useful for others. jsFiddle with answer. Code below:

header, #container, section, footer, footer img#iphone { display: block; }


header {
    background: url('images/header.jpg') repeat-x;
    height: 160px;

    border: 5px solid #aa3;
    color: #aa3;
}
    header img#logo {
        margin: 0 auto;
    }

#container {
    width: 550px;
    margin: 0 auto;

    overflow: hidden;

    border: 5px solid #33a;
    color: #33a;
}

section {
    float: left;    
    width: 310px;
    height: 200px;

    border: 5px solid #3a3;
    color: #3a3;
}

footer {
    background: url('images/footer.jpg') repeat-x;
    height: 150px;

    border: 5px solid #aa3;
    color: #aa3;
}
    footer #container {
        position: relative;
        top: -320px;
    }
    footer img#iphone {
        float: right;    
        height: 400px;
        width: 204px;

        border: 5px solid #a33;
        color: #a33;
    }