SharePoint CSS Trick: Align your Search Inputs

I banged my head on this one for awhile and finally just had to pick apart the View Source code for a MOSS page….

If you are creating a custom Master Page for MOSS 2007 and use the Search user control (<SharePoint:DelegateControl runat=”server” ControlId=”SmallSearchInputBox”/>) you may have issues getting the search inputs to align to the right.  That is how it is in the default look and feel, yet when you use this user control in your custom master page it mysteriously scoots over to the left.    I don’t choose to use the default code, so I was determined to figure out why I wasn’t able to shift the search over to the right, despite trying floats, divs, table alignments and ancient rain dances.

I finally found the culprit to be an empty table cell to the right of the search inputs with a width set to 100%.  Gak!  No wonder!   So copy this style into your custom CSS styles to align your search to the right:

.ms-sbLastcell,.ms-rightbodysectionsearchbox {
width: 0;
padding: 0px;
margin: 0px;

And then I suggest adding this as well, or you may end up with search inputs that are spaced apart across the screen:

.ms-sbtable-ex {
width: 0;

You can now align the search however you need in your Master Page.

If you aligning your inputs to the right, I suggest adding this code:

.ms-globalTitleArea table td table  {
text-align: right;
float: right;

The Text-align takes care of IE, and the float handles Firefox.

**** PLEASE NOTE this is for a MOSS site, not for sites running on a WSS only server. ****
If you are having issues aligning your search in a WSS only site, try this:

.ms-globalTitleArea  table td {
text-align: right