Keep label and text box on the same line

[FunkyDexter]

I have the following snippet to offer a filter on a Leads screen:-

@using (Html.BeginForm())
    {
        <p> Surname: @Html.TextBox("SurnameSearch") 
            Forename: @Html.TextBox("ForenameSearch")
            Address: @Html.TextBox("AddressSearch")
            Postcode: @Html.TextBox("PostcodeSearch")
            <br />
            Marketing Category: @Html.DropDownList("MarketingCategoryID", String.Empty)
            Source Type: @Html.DropDownList("SourceTypeID", String.Empty)
            Source Account: @Html.DropDownList("SourceAccountID", String.Empty)
            Source: @Html.DropDownList("SourceID", string.Empty)
            <br />
            <input type="submit" value="Filter" />
        </p>
    }

The problem is that, depending on the width of the screen, the labels (e.g. "Postcode") do not always appear on the same line as the text box/dropdown they refer to. Is there a way of ensuring that, when it needs to "flow" an element down to the next line, it flows the label and the input control together?

[Bruce Fox]

If you can, set a min width. IE. Possibly a <div> and CSS and seting a Min width of the parent container to prevent the wrap see here?

[Lightning]

You could put every label with its input in one div, where the div has display:inline-block. That way both element stay together

[FunkyDexter]

Hmm, that sounds promising, thanks. I'm working on the membership part of the system at the moment (which is slowly turning me grey ) but I'll be coming back to this soon and I'll give it a try.

Still open to further suggestions if anyone has any.

[NeedSomeAnswers]

You could put every label with its input in one div, where the div has display:inline-block.

Yep that works, i use that method. Here is an example that i am using it to keep a label and Telerik radcombobox on the same line, so the label immediately precedes the combo.

html

<div id="ClientSelect" class="ClientSelect"><label id="clientLabel" class="lblClientMatter">Client</label>&nbsp;<telerik:RadDropDownList ID="ClientDropDown" runat="server" AutoPostBack="true" OnSelectedIndexChanged="ClientDropDown_SelectedIndexChanged"></telerik:RadDropDownList>
</div>

Style

#ClientSelect
{
    position: relative;
    display:inline-block;
}