Question

I have searched, and this post is closest, but not exactly the same. I am trying to have two spans next to each other, with percentage widths. However, when the window’s width is decreased by the user’s screen size or window resizing, the labels and input fields separate individually. I would like the label and input to be one unit, so that if the window is decreased, the second span will wrap below the first.

HTML:

<span><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></span>
<span><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></span>​

CSS:

#startdate {
    width: 30%;
    display: inline-block;
}
#enddate {
    width: 30%;
    display: inline-block;
}​

Here is a fiddle. If you want to test the resizing functionality, move the center bar to the right.

Answer 1

Fixed: http://jsfiddle.net/XceSq/1/

<div style="display:inline-block;"><label for="startdate">Start Date</label><input id="startdate" name="startdate" type="text" value="" /></div>
<div style="display:inline-block;"><label for="enddate">End Date</label><input id="enddate" name="enddate" type="text" value="" /><br></div>​

The span element is a textual container and does not support the width requirement you are aiming to achieve. The div element, however, is a layout container which will allow you to contain the two objects within a single block. Using display:inline-block, we’re able to make sure that the two containers show up side by side.

Enjoy and good luck!