Странная ошибка выравнивания - CSS

Question

Я пытаюсь разместить элементы, необходимые и необязательные, справа от div #contact с интервалом 20 пикселей между элементами. Это прекрасно работает для требуемых элементов, но когда я вставляю необходимый элемент, необходимый элемент выравнивается слева от последнего требуемого элемента без учета расстояния в 20 пикселей. Пожалуйста, вы можете сказать мне, что вызывает это?

Вот изображение, показывающее этот странный случай, и мой код.

#contact #required {
    background-image: url('../img/req_field.png');
    background-repeat: no-repeat;
    width: 441px;
    height: 54px;
    margin-bottom: 20px;
    float: right;
    display: block;
}

#contact #nrequired {
    background-image: url('../img/field.png');
    background-repeat: no-repeat;
    width: 421px;
    height: 54px;
    margin-bottom: 20px;
    float: right;
    display: block;
}

<div id="email">
    <h1>Shoot me an email </h1>
    <h2> (All required fields are marked *)</h2>
    <div id="required"/>
    <div id="required"/>
    <div id="nrequired"/>
    <div id="logo"/>
</div>

Answer 1

Прежде всего, вы не можете использовать одни и те же id более одного раза на странице - они должны быть уникальными.Вместо этого измените идентификаторы на имена классов и исправьте ваши селекторы соответствующим образом.

Для вашей проблемы с макетом добавление clear:right; в div должно помочь.

Что вызывает это?

Дивы плавающие, поэтому они будут пытаться поместиться в любое доступное пространство, и у вас, очевидно, достаточно места в контейнере, чтобы поместиться два рядом.