Another CSS overlapping issue - css

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

this happens when you float boxes side by side, one box to the left, the other to the right, both having width:50%. But padding, margins and border unintentionally increase the width of the boxes causing them to be more than 50% and forcing the right box to move under the previous box.
try setting static width to the boxes (will need calculation)
http://jsfiddle.net/fuYYv/

Answer 2

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;
}