Question

Here is my code for css div based layout. I want a search box inside the #header div. But when I add margin or padding to the #header .search class, it will add this to height of #header div. Please help me how can I get it correctly. I want the search box at 10px margin-bottom from where #header div ends.

#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

You could position the search box absolutely inside the #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;
}

This way your search box won’t ever affect the parent containers.

Demo: http://jsfiddle.net/fparent/AyyZG/