奇妙なアラインメントエラー - CSS

Question

要素間に20pxのスペースを持つdiv #contactの右側に必要な要素と必要な要素をフロートさせようとしています。これは必須の要素に対しては完全に機能しますが、必要な要素を挿入すると、nrequired要素は、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

まず、あなたは1ページあたり1回以上同じid以上を使用することはできません - 彼らは一意でなければなりません。代わりにidをクラス名に変更し、それに応じてセレクタを修正してください。

レイアウトに問題がある場合は、div3にclear:right;を追加すると効果があります。

これは何が原因ですか？

divは浮動しているので、利用可能なスペースに収まるようにしようとします。コンテナには、2つのサイドバイサイドに合わせて十分なスペースがあるようです。