I have several elements in HTML that I want to keep grouped when they wrap. I think the answer lies with some CSS (or maybe even JavaScript), but I’m not sure. For example, I have several elements laid out like this:
<label A><input A><label B><input B><label C><input C>
What happens is the users sometimes resize the browser window, and we end up with this:
<label A><input A><label B>
<input B><label C><input C>
In the example above, the input B isn’t next to its input element. Is there a way to group the label and the input so they wrap together? I’ve tried divs and putting the elements together in a table with “nowrap”, with mixed results. I don’t mind the lines wrapping, I just need to keep the label and input element together.
It may also be worth looking at setting parent divs around each pair you wish to keep together – I know you said you tried this but also give them a fixed width and display:inline; and it should work
ALSOO include float:left/right;(choose only one) This way, if the browser window is too small to show them all side by side, it will instead take the end pair and drop it onto the next line but should keep all elements within together and side by side.