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

Question

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

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

#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; в divs, чтобы сделать трюк.

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

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