Ok so if you’ve looked at the search area for OOTB Sharepoint 2010, it is 100% width, and appears either above or below the top navigation & ribbon. So here’s a way to fix that. Consider the ribbon ignored at the moment.
Structure:
<div id=”topnavandsearch”>
<!– top navigation publishing data source –>
<PublishingNavigation:PortalSiteMapDataSource
ID=”topSiteMap”
runat=”server”
EnableViewState=”false”
SiteMapProvider=”GlobalNavigation”
StartFromCurrentNode=”true”
StartingNodeOffset=”0″
ShowStartingNode=”false”
TrimNonCurrentTypes=”Heading”/>
<!– top navigation menu (set to use the new Simple Rendering) –>
<SharePoint:AspMenu
ID=”TopNavigationMenuV4″
EncodeTitle=”false”
Runat=”server”
EnableViewState=”false”
DataSourceID=”topSiteMap”
AccessKey=”<%$Resources:wss,navigation_accesskey%>”
UseSimpleRendering=”true”
UseSeparateCss=”false”
Orientation=”Horizontal”
StaticDisplayLevels=”1″
MaximumDynamicDisplayLevels=”0″
SkipLinkText=”"
CssClass=”nav”>
</SharePoint:AspMenu>
<!– search box loads from delegate, style with CSS –>
<div class=”"searchField” id=”s4-searcharea”>
<asp:ContentPlaceHolder id=”PlaceHolderSearchArea” runat=”server”>
<SharePoint:DelegateControl runat=”server” ControlId=”SmallSearchInputBox” Version=”4″/>
</asp:ContentPlaceHolder>
</div>
</div>
CSS:
#topnavandsearch {
width:960px;
border-bottom:1px solid #ccc;
margin-bottom:10px;
clear:both;
display:block;
float:left;
}
#zz15_TopNavigationMenuV4 {
width:660px;
float:left;
}
.searchField {
float:left;
}
#s4-searcharea {
float:left;
clear:right;
padding-top:20px;
}
/* This resets the width of the table that the search input box is stored in
making it less than 100% so it is placeable next to your top navigation */
#s4-searcharea table.s4-wpTopTable {
width:200px;
}
Result:
