ヘッダdiv内の検索div？

Question

ここにCSSベースのレイアウトのための私のコードです。 #header div内に検索ボックスが必要です。しかし、#header .searchクラスにマージンやパディングを追加すると、#header divの高さにこれが追加されます。どうすればそれを正しく得ることができますか教えてください。 #header divが終わるところから10px margin-bottomのところに検索ボックスを置いて欲しい。

#container { 
margin:0px auto; 
width:984px; 
border-left:#FFFFFF solid 1px; 
border-right:#FFFFFF solid 1px; 
} 

#header { 
height:150px; 
background: url(./images/header.png) no-repeat; 
border-bottom:#FFFFFF solid 1px; 
} 

#header .search { 
margin:0px auto; 
text-align:center; 
width:620px; 
} 

Answer 1

を動作するはずですあなたはこの方法では、検索ボックスが今まで親コンテナには影響しません絶対に＃ヘッダー

#container { 
margin:0px auto; 
width:984px; 
border-left:#FFFFFF solid 1px; 
border-right:#FFFFFF solid 1px; 
} 

#header { 
height:150px; 
background: url(./images/header.png) no-repeat; 
border-bottom:#FFFFFF solid 1px; 
position:relative; // parent container 
} 

#header .search { 
margin:0px auto; 
text-align:center; 
width:620px; 
position:absolute; 
left:0; bottom:10px; 
} 

内の検索ボックスを配置することができます。

デモ：http://jsfiddle.net/fparent/AyyZG/

Answer 2

両方のタグにディスプレイを挿入し、margin-bottomを追加します。