IE6 HTML control wrapping

Question

Is there any way to prevent wrapping across controls in IE6? For example, I have a label and a single select box. The select box width is dynamic (depending on the content). I want the label to always be to the left of the select box. Right now the problem I am having is the select box drops below the label. I have tried using the <nobr> tag as well as CSS word-wrap rules, but because this isn't text the wrapping rules do not apply. The only way I have found for sure to make it work is to place them in a two-column table, but I do not like this solution. Is there any other way?

Answer 1

If both the label and the input have an inline display ("display: inline;") and the input is breaking to a new line, then chances are the parent container is too narrow. With that said, typical horizontal-label form layouts don't rely on this inline display, they take a more controlled approach utilizing block-level, floated elements. For example, given the following HTML:

<div class="field">
    <label for="fieldId">field label</label> 
    <input id="fieldId" name="field" />
</div>

You could set the position of the label with the following CSS:

.field {
    overflow: hidden; /* clear float */
}
.field label {
    display: block;
    float: left;
    margin: 0 5px 0 0;
}

There's a ton of variations on the specifics, but the above conveys the basic concept.