Еще одна проблема с перекрытием CSS

Question

ОБНОВЛЕНИЕ: Вот jsFiddle .

Я хочу, чтобы это выглядело так:

... но выглядит это так:

Контейнер # расположен горизонтально по центру и должен оставаться таким. Не могу понять, что это правильно ...

Answer 1

Брайан Даунинг в комментариях дал мне подсказку.

Я добавил

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

Работает отлично.Большое спасибо вам, волшебники:)

Это должно быть полезно для других. jsFiddle с ответом.Код ниже:

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

Answer 2

это происходит, когда вы перемещаете боксы рядом друг с другом: один блок слева, другой справа, оба имеют width:50%. Но отступы, поля и границы непреднамеренно увеличивают ширину ящиков, заставляя их превышать 50% и заставляя правую коробку перемещаться под предыдущей рамкой.

попробуйте установить статическую ширину для блоков (потребуется расчет)

http://jsfiddle.net/fuYYv/