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;
}