header div內搜索div？

Question

這是我的基於CSS div佈局的代碼。我想在#header div內搜索框。但是，當我將margin或padding添加到#header .search類時，它會將此添加到#header div的高度。請幫助我如何正確地得到它。我希望搜索框位於#header div結尾的10px頁邊距底部。

#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

你可以絕對定位的#header

#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

在兩個標籤上插入一個顯示，並添加一個頁邊距。應該工作