[SalesForce] Format Visualforce Column to prevent word wrap

I have a visualforce page where i need to display 4 columns. Each column has a label along with outputfield. In one of the column, (second column in the attached pic), the labels are too long and spill onto next line. Is there a way i can move the whole stuff inside the second column to right, so that labels will fill in a single space.
Second column labels problem

In second column, "Contact Time Zone" is a single label, and i want it to be in one line.

Here's the code. I have eliminated everything except second column


        <!-- Component for Contact Details.-->
        <c:SC_TopPanelComponent compId="contactInfo">
              <! ----- first column stuff >             
        </c:SC_TopPanelComponent>

        <!-- Component for Contact Details -->
        <c:SC_TopPanelComponent compId="contactDetail">
            <c:SC_FieldValue fieldLabel="{!$Label.SC_Region}" onHover="true" fieldValue="{!Case.Support_required_region__c}" fieldId="Region" />
            <c:SC_FieldValue fieldLabel="{!$Label.SC_TimeZone}" onHover="true" fieldValue="{!Case.Support_available_timezone__c}" fieldId="TimeZone" />
            <c:SC_FieldValue fieldLabel="{!$Label.SC_AvailableDays}" onHover="true" fieldValue="{!Case.Support_Available_Days__c}" fieldId="AvailableDays"  />
            <c:SC_FieldValue fieldLabel="{!$Label.SC_TimeRange}" onHover="true" fieldValue="{!Case.Support_available_time_from__c}" fieldId="FromTime" />
        </c:SC_TopPanelComponent>


        <!-- Component for Case Details -->
        <c:SC_TopPanelComponent compId="contactDetails">
           <! ----- third column stuff   
        </c:SC_TopPanelComponent>

        <!-- Component for Case Details -->
        <c:SC_TopPanelComponent compId="caseDetails">
             <!------- fourth column detail ---- >     
       </c:SC_TopPanelComponent>

        <script type="text/javascript" language="javascript">
        //<![CDATA[ 
            <apex:outputPanel layout="none" rendered="{!notificationFields.size != 0}">
                var currCase = new Object();
                var caseFields = new Object();

                <apex:repeat value="{!notificationFields}" var="field">
                    caseFields['{!field}'] = '{!field}';
                    currCase['{!field}'] = '{!JSENCODE(case[field])}';
                </apex:repeat>

                $('#sc_notify').children(':first').button({
                    icons: {
                        primary: "ui-icon-flag"
                    }
                });
                var pushTopicName = 'SCC_Case';
                subs[pushTopicName] = {
                    subName: pushTopicName,
                    interval: 'short',
                    isAgentPanelFunction: false,
                    action: function() {
                        sc_invokeRemoteAction(SC_RemoteActionUtils.getCase, '{!JSENCODE(case.Id)}', function(result) {
                            var hasChangedValue = false;

                            for(var i in caseFields) {
                                if(currCase[i] == '' && result[i] == undefined) continue;

                                if(result[i] != currCase[i]) {
                                    hasChangedValue = true;
                                    currCase[i] = result[i];
                                    var replacementText = result[i] == '' || result[i] == null ? '{!$Label.SC_none_provided}' : result[i];
                                    $("[id$='" + i + "']").effect("highlight", {}, {!highlightTime}).children(":last").attr('title', replacementText).text(replacementText);
                                }
                            }

                            if(hasChangedValue) {
                                $('#sc_notify_text').text(result.LastModifiedById == '{!$User.Id}' ? 'saving update' : 'modified by ' + result.LastModifiedBy.Name);
                                $('#sc_notify').slideToggle('slow', function() {
                                    $(this).delay(800).slideToggle('slow');
                                });
                            }
                        }, { escape: false} );
                    }
                };
            </apex:outputPanel>
        // ]]>
        </script>
    </apex:define>
</apex:composition>

Best Answer

Difficult to say without knowing the structure of your components you are using but you can try:

Add the css

white-space: nowrap;

to the appropriate element