positioning a div inside another div?

Question

In a big div I have search box which basically is a div having text box glass image and button. Requirement is to positioned this search wizard vertically in middle and on right side in div. This box is coming on top left inside div. I have tried different things but not getting how to set it. Please guide me.

Thanks

<div class="Right">
        <div class="header-search" style="position: relative; top: auto; bottom: auto; right: 0 left:100%;
            margin: auto 0 auto auto;">
            <input type="text" class="searchbox" />
            <input type="button" class="searchbutton" value="›" />
        </div>
    </div>


div.Container div.Right 
{
        width:50%;
        float:right ;
        border: 01px dashed green;
        height:95px !important;
        padding:auto 0 auto 200px;
}   

div.header-search
{
    overflow:auto;
    display:inline;
    text-align:right !important;
    border:3px dashed blue;    
    padding:20px 0 auto 50px;

}

div.header-search input.searchbox 
{
    border-bottom-left-radius:5px;
    -webkit-border-bottom-left-radius:5px; 
    -moz-border-bottom-left-radius:5px;


    border-top-left-radius:5px;  
    -webkit-top-left-radius:5px; 
    -moz-left-radius:5px;


     border:2px solid #316200;
     background-color:white;
     height:16px;
     padding:4px;
     padding-left:28px;
     padding-right:10px;
     color:#4a4a4a;
     float:left;
     background:white url(../images/SearchImage.png) 0 50%  no-repeat;


 }

div.header-search input.searchbutton
{

  border-bottom-right-radius:5px;
  -webkit-border-bottom-right-radius:5px; 
  -moz-border-bottom-right-radius:5px;

   border-top-right-radius:5px;  
   -webkit-top-right-radius:5px; 
   -moz-right-radius:5px;

   background:#458A00;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#A5D376', endColorstr='#326400'); /* for IE */
   background: -webkit-gradient(linear, left top, left bottom, from(#A5D376), to(#326400)); /* for webkit browsers */
   background: -moz-linear-gradient(top,  #A5D376,  #326400); /* for firefox 3.6+ */  
  width:50px; 
  height:28px;
  color:White;
  font-size:16px;
  font-weight:bold ;
  border:2px solid #316200;
  border-left:none;


}

Answer 1

The first step in understanding how positioned elements is reading an article like this one:

CSS-Tricks.com - absolute positioning inside relative positioning

you are using position: relative on the wrong div as it should be assigned to .Right- while header-search should have instead 'position: absolute;' and values for left/right and top/bottom

the article above explains it much better than I could ever do!

Perhaps this would be a good starting point:

<div class="Right">
        <div class="header-search">
            <input type="text" class="searchbox" />
            <input type="button" class="searchbutton" value="›" />
        </div>
    </div>


div.Container div.Right {
        position: relative;
        width: 50%;
        float: right;
        border: 1px dashed green;
        height: 95px !important;
        padding: auto 0 auto 200px;
}   

div.header-search {
    position: absolute;
    right: 0;
    top: 0;
    overflow: auto;
    display: inline;
    text-align: right !important;
    border: 3px dashed blue;    
    padding: 20px 0 auto 50px;
}

Answer 2

remove all styling from your div's as this is bad practice. Next, convert your two styles for .Right and .header-search like this:

div.Right {
    border: 1px dashed green;
    height:95px;
    position: relative;
}   

div.header-search {
    border:1px dashed blue;
    position: absolute;
    top: 30px;
    right: 0;
}

This should accomplish what you are attempting. There isn't a clean, easy way to center vertically, but since you have a fixed height on the outter .Right div and a fixed height on the search elements, it's best just to use a fixed top position on the inner .header-search.

You can see it in action on this jsfiddle:

http://jsfiddle.net/L4sgc/