Page Block Title went to a new line

Question

I'm creating a search page. The filters is on a different page block than the results but then the title went to a new line. (see photo)

Is there a way to put "Search" and "Filters" on the same line?

Here's my view

    <apex:pageBlock tabStyle="LightBlue__c">

        <apex:panelgrid columns="2">
            <apex:outputpanel styleClass="SearchFilters">
                <apex:pageBlock title="Search Filters" mode="edit" id="criteria" tabStyle="LightBlue__c">
                    <div class="SearchFiltersBlock">
                        <table cellpadding="2" cellspacing="2">
                            <tr>
                                <td style="font-weight:bold;">
                                    <apex:inputCheckbox value="{!articlename}" />Article Name (exact)
                                    <br/>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight:bold;">
                                    <apex:inputCheckbox value="{!articleName}" />Contains
                                    <br/>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight:bold;">
                                    <apex:inputCheckbox value="{!matchCase}" />Match Everything
                                    <br/>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight:bold;">
                                    <apex:inputCheckbox value="{!published}" />Published
                                    <br/>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight:bold;">
                                    <apex:selectList value="{!dataCategory}" multiselect="false" size="1">
                                        <apex:selectOptions value="{!DataCategoryOption}" /></apex:selectList>
                                </td>
                            </tr>
                            <tr>
                                <td style="font-weight:bold;">
                                    Tag
                                    <br/>
                                    <apex:inputText value="{!tag}" style="width:100px;" />
                                </td>
                            </tr>
                        </table>

                        <table cellpadding="2" cellspacing="2">
                            <tr>
                                <td style="font-weight:bold;">
                                    <apex:selectList value="{!sortBy}" multiselect="false" size="1">
                                        <apex:selectOptions value="{!sortByOptions}" /></apex:selectList>
                                </td>
                            </tr>
                        </table>

                        <!--hide this on the visualforce page and check on why it's causing the expecting colon error-->
                        <div style="top:165px;right:27px;position:absolute;display:none">
                            <apex:inputtext value="{!searchresultlimit}" style="width:30px;right:20px;" />&nbsp;
                            <apex:outputlabel value="records" rendered="{!$Profile.Name=='System Administrator'}" style="font-weight:bold;color:#474747;" />
                        </div>

                        <apex:actionStatus id="actStatusId">
                            <apex:facet name="start">
                                <div class="waitingSearchDiv outerGrayedPanel" id="casActionProcessing">
                                    <div class="waitingHolder innerProcessPanel">
                                        <br />
                                        <img class="waitingImage" src="/img/loading.gif" title="Searching for matching Articles... " />
                                        <span class="waitingDescription">Searching for matching Articles...</span>
                                    </div>
                                </div>
                            </apex:facet>
                        </apex:actionStatus>

                        <!-- <apex:actionSupport event="onclick" action="{!incrementCounter}" rerender="counter" status="counterStatus" /> -->

                    </div>
                </apex:pageBlock>
            </apex:outputpanel>

            <apex:outputPanel layout="block" styleClass="searchresultblock">
                <apex:pageBlock title="Search Results" tabStyle="LightBlue__c">
                    <div class="SearchResultsBlock">
                        <apex:pageBlockSection columns="1">
                            <apex:outputText rendered="{!accountresult.size==0}" value="No matching records." />
                        </apex:pageBlockSection>

                        <apex:pageblockTable rendered="{!accountresult.size!=0}" value="{!AllSearchGDCKnowledgeArticle}" var="accr" id="searchresulttable">
                            <apex:column headerValue="Article">
                                <apex:outputlink value="https://ap1.salesforce.com/{!accr.id}">{!accr.Name}</apex:outputlink>
                            </apex:column>
                            <apex:column value="{!accr.id}" />
                            <apex:column value="{!accr.Published__c}" />
                            <apex:column value="{!accr.Data_category__c}" />
                            <!--<apex:column value="{!accr.shippingcountry}" />
            <apex:column value="{!accr.industry}" />
            <apex:column value="{!accr.type}" />-->

                        </apex:pageBlockTable>

                        <div class="paginator">
                            <span class="prevNextLinks">
                <apex:commandLink styleClass="prevNext" action="{!first}" rendered="{!accountresult.size!=0}" rerender="searchresulttable" status="Loadingrecords"><img src="/s.gif" title="First Page" alt="First Page" class="first"/></apex:commandlink> 
                <apex:commandLink styleClass="prevNext" action="{!previous}" rendered="{!accountresult.size!=0}" rerender="searchresulttable" status="Loadingrecords"><img src="/s.gif" title="Previous" alt="Previous" class="prev"/>Previous</apex:commandlink>

                <apex:commandLink styleClass="prevNext" action="{!next}" rendered="{!accountresult.size!=0}" rerender="searchresulttable" status="Loadingrecords">Next<img src="/s.gif" title="Next" alt="Next" class="next"/></apex:commandlink>
                <apex:commandLink styleClass="prevNext" action="{!last}" rendered="{!accountresult.size!=0}" rerender="searchresulttable" status="Loadingrecords"><img src="/s.gif" title="Last Page" alt="Last Page" class="last"/></apex:commandlink>

                </span>
                        </div>

                        <apex:actionStatus id="Loadingrecords">
                            <apex:facet name="start">
                                <div class="waitingSearchDiv outerGrayedPanel" id="casActionProcessing">
                                    <div class="waitingHolder innerProcessPanel">
                                        <br />
                                        <img class="waitingImage" src="/img/loading.gif" title="Loading records..." />
                                        <span class="waitingDescription">Loading records...</span>
                                    </div>
                                </div>
                            </apex:facet>
                        </apex:actionStatus>
                    </div>
                </apex:pageBlock>
            </apex:outputPanel>
        </apex:panelgrid>

    </apex:pageBlock>

Answer 1

The reason it shows up on two lines is because the browser is allowed to wrap the text onto multiple lines so that it can be shown without pushing content off of the visible area of the page.

The solution is to leverage the CSS property which disallows the wrapping of text onto multiple lines.

white-space: nowrap;

This can be implemented using the style attribute directly on the element or using a custom CSS class declaration.

Answer 2

Try fiddling around with the CSS a bit. Your styleClass="SearchFilters" might have some width parameter which might be wrapping your text.

Answer 3

Update this line

<apex:panelgrid columns="2">

and replace with the following line

<apex:panelgrid columns="2" style="width:100%;" >

Should work :)