CSS3の部門の高さ

Question

私はHTMLでフォームを試しています。 div #statusについては Fiddle

、CSSルールは

#status{ 
    margin:auto; 
    width:50%; 
    border:2px solid red; 
    background:white; 
    height:40%; 
} 

をare-しかしdivisonの高さは、CSSでの高さのルールによって変更されない理由を私は理解できません。私は

#status{ 
    margin:auto; 
    width:50%; 
    border:2px solid red; 
    background:white; 
    height:40px; 
} 

JSFiddle

OUT-しようとするとdiv要素がいくつかのランダムな場所に配置されている間にわたり、よりこれが一番下にテキストを残します。 この部門を電子メールIDフィールドの下に置くと、テキストがその内部に表示されるのに役立ちますか？

私のCSSのどのルールもdivのこの位置付けに責任があります。

Answer 1

浮動小数点の下にdivを挿入しています。あなたの#status CSSルールにclear: bothを追加する必要があります。

#status { 
    margin: auto; 
    width: 50%; 
    border: 2px solid red; 
    background: white; 
    height: 40%; /* or 40px, which will look slightly different. Your choice. */ 
    clear: both; 
} 

Updated Fiddle