I have a div with a max-width that I set, and a yellow background. In that div I put two sets of radio buttons (5 buttons in each set), each with an associated label.
I don't want the sets to divide on two lines between radiobuttons, or between the associated text and the radiobutton. So I use 'white-space:nowrap' in a span around each set. On the other hand, if there are two long sets, one after another, I would want the second set to automatically go to the next line.
What I see is interesting. I have the div with the yellow background centered in my screen, but both radiobutton sets are on the same line. The rightmost radiobutton set starts in the yellow area, but extends past it, into the background. I have made a jsfiddle to demonstrate, it is at: https://jsfiddle.net/03jLe0x1/ Code also follows:
.radiospan {
font-family: Verdana;
}
.checkspan {
white-space: nowrap;
font-family: Verdana;
}
#newDivCenter {
background-color: yellow;
text-align: center;
min-width:788px;
max-width:840px;
}
<div id="newDivCenter"><span class="checkspan"><input type="checkbox" id="chk0" name="mychecks0" value="1">
Audible?</span><span> </span><span class="checkspan"><input type="checkbox" id="chk1" name="mychecks1" value="1">Musical?
</span><span> </span><span style="white-space: nowrap;"><span>Does this music transport you to heaven?
(1 for yuk, 5 for wow!)</span><span class="radiospan"><input type="radio" id="rad_1" name="myradios0" value="1">1</span>
<span class="radiospan"><input type="radio" id="rad_2" name="myradios0" value="2">2</span><span class="radiospan">
<input type="radio" id="rad_3" name="myradios0" value="3">3</span><span class="radiospan"><input type="radio" id="rad_4" name="myradios0" value="4">4</span><span class="radiospan"><input type="radio" id="rad_5" name="myradios0" value="5">5</span></span><span> </span><span style="white-space: nowrap;"><span>Are you now a believer in God?
(1 for not really, 5 for yeah!)</span><span class="radiospan"><input type="radio" id="rad_1" name="myradios1" value="1">1</span>
<span class="radiospan"><input type="radio" id="rad_2" name="myradios1" value="2">2</span><span class="radiospan">
<input type="radio" id="rad_3" name="myradios1" value="3">3</span><span class="radiospan"><input type="radio" id="rad_4"
name="myradios1" value="4">4</span><span class="radiospan"><input type="radio" id="rad_5" name="myradios1" value="5">5</span></span><span> </span><br style="clear: both;"><select id="mydropdown0">
<option value="0">Please Select religion</option><option value="318">Jewish</option><option value="319">Hindu</option>
<option value="320">Christian</option><option value="321">Muslim</option><option value="322">Atheist</option><option value="323">Other</option></select><span> </span></div>
spans are inline elements, so given the chance they are going to display next to each other (inline). If you want groups of elements to display in blocks (not inline) put them in a block level element like a div or assign: display:block to your span that they are in. Or if you prefer to allow them to be inline if there's room but wrap if not, then use display: inline-block. In the example below, I just took your code and added display:block to some of the wrapping elements so you can see the difference.
.radiospan {
font-family: Verdana;
}
.checkspan {
white-space: nowrap;
font-family: Verdana;
}
#newDivCenter {
background-color: yellow;
text-align: center;
min-width:788px;
max-width:840px;
} <div id="newDivCenter">
<span class="checkspan">
<input type="checkbox" id="chk0" name="mychecks0" value="1">Audible?
</span>
<span> </span>
<span class="checkspan">
<input type="checkbox" id="chk1" name="mychecks1" value="1">Musical?
</span>
<span> </span>
<span style="display: block; white-space: nowrap;">
<span>Does this music transport you to heaven? (1 for yuk, 5 for wow!)</span>
<span class="radiospan">
<input type="radio" id="rad_1" name="myradios0" value="1">1</span>
<span class="radiospan">
<input type="radio" id="rad_2" name="myradios0" value="2">2</span>
<span class="radiospan">
<input type="radio" id="rad_3" name="myradios0" value="3">3</span>
<span class="radiospan">
<input type="radio" id="rad_4" name="myradios0" value="4">4</span><span class="radiospan"><input type="radio" id="rad_5" name="myradios0" value="5">5</span></span><span> </span>
<span style="white-space: nowrap; display: block;">
<span>Are you now a believer in God? (1 for not really, 5 for yeah!)</span>
<span class="radiospan">
<input type="radio" id="rad_1" name="myradios1" value="1">1</span>
<span class="radiospan"><input type="radio" id="rad_2" name="myradios1" value="2">2</span>
<span class="radiospan"><input type="radio" id="rad_3" name="myradios1" value="3">3</span>
<span class="radiospan"><input type="radio" id="rad_4" name="myradios1" value="4">4</span>
<span class="radiospan"><input type="radio" id="rad_5" name="myradios1" value="5">5</span>
</span><span> </span>
<br style="clear: both;">
<select id="mydropdown0">
<option value="0">Please Select religion</option><option value="318">Jewish</option>
<option value="319">Hindu</option>
<option value="320">Christian</option>
<option value="321">Muslim</option><option value="322">Atheist</option>
<option value="323">Other</option></select>
<span> </span>
</div>