Question

I have a web form that contains several inputs, some of which are positioned next to another while others are on a new line. Example of which is shown:

<h3>Max and Min Value</h3>
Max: <input name=max_value type=number>* Min: <input name=min_value type=number>

<h3>Overall Value</h3>
Overall: <input name=overall type=number>

I want to position max_value and min_value such that they are on the same line if the browser window is wide enough, else break to a new line at * position. I understand that I can get the job done by enclosing them in wrapper elements and using float:left to style both. But that would affect the flow of the whole document unless I introduce additional spacer elements.

Is there an alternative way to create the optional line break without affecting the flow of the document?

Answer 1

Wrapping your Min input in a div and specifying display: inline-block should do the trick:

<h3>Max and Min Value</h3> 
Max: <input name=max_value type=number>* <div style="display: inline-block">Min: <input name=min_value type=number></div>

<h3>Overall Value</h3> 
Overall: <input name=overall type=number>