Question

I want to keep the field and the icon (question mark) at the same line at any time, even if the width is reduced. (preferably using CSS)

I tried various options such as white-space: nowrap, putting them in the same <div/>, but no success.

EDIT

My HTML markup is similar to the following:

<ul data-role="listview" >
            <li data-role="fieldcontain">
                <div>
                    <label for="name">*Email</label>
                    <input type="text" name="name" id="name" />
                    <img src="help.png" title="title" alt="help"/>
                </div>
            </li>
        </ul>

I am using HTML5 with jQuery Mobile.

Answer 1

white-space: nowrap has no effect on elements, it just tells the browser not to split plain text nodes.

To achieve what you want, you need to make the div wrapping everything wide enough to display everything in a single line. In the general case, this isn’t simple to achieve without JavaScript because CSS has only rudimentary support for aligning several elements.

Solutions:

1. Make the div so wide that it will always be able to contain the three elements. This is hard because of the label and impossible if you want the input field to grow (= use all available space).

2. Give the div a right margin which is wide enough to contain the image and then position it absolutely in the empty space. Drawback: It will be hard to align the image vertically.

3. The solution that works perfectly but no one wants to hear: Use a table because table rows do what you want / need.