CSS - I have a transparent checkbox under some text. But sometime the text shifts down to the next row, and the checkbox does not.

I am using code inspired by the CSS Wizardy entry about styling radio and checkboxes by setting their opacity to zero, and putting something on top of it.  I have some html like this <input type="radio" name="attr_show-SPM-details" class="sheet-hideIfThisChecked sheet-show-all"  value="3" checked title="Show All." /> <span class="sheet-option"></span> and some css like this. .sheet-show-all, .sheet-show-most, .sheet-hide-all {     opacity:    0;     width:      5em;     height:      100%;     position:    relative; vertical-align: middle; margin-right: -5em;     cursor:      pointer;     z-index:    1; } input[type="checkbox"]+.sheet-option-show::before, input[type="radio"]+.sheet-option::before {     margin-right: 4px; line-height: 24px; text-align: center; display: inline-block; vertical-align: middle; width: 5em; height: 24px; font-size: 12px; } .sheet-show-all+.sheet-option::before {     content: "[show all]"; } So basically what I end up with is a display of    [show all]   that is 5 em wide, and under it, I get a 5em wide checkbox. Check the text, and the checkbox fires. The only problem is that if this combo happens to appear right at the end of a row, the ::before text will flow down to be the start of the next row, but the invisible checkbox will stay at the end of the previous row.  If I inspect the values, Chrome shows the checkbox after the last element and hanging off outside of the display area it is supposed to be in.  I am not so good with css and the box model, but it seems to me that the ::before text shifted down to the next row as one would expect it to, while for some reason the invisible checkbox is exceeding it's allocated area.  I assume they have some different sorts of options that I have to set them to be the same, but it does not seem to be "overflow" and I don't know what other option it could be.   Any help would be greatly appreciated. 

You could try eliminating the whitespace between the input and the span. Currently, there will be 1 space between input and span, and that might throw off the alignment.

You can also try wrapping your input and span elements within a span using white-space:nowrap to keep them together. <span style="white-space:nowrap;">     <input type="radio" name="attr_show-SPM-details" class="sheet-hideIfThisChecked sheet-show-all"  value="3" title="Show All." />     <span class="sheet-option"></span> <span> .

Vince said: You can also try wrapping your input and span elements within a span using white-space:nowrap to keep them together. <span style="white-space:nowrap;">     <input type="radio" name="attr_show-SPM-details" class="sheet-hideIfThisChecked sheet-show-all"  value="3" title="Show All." />     <span class="sheet-option"></span> <span> . Once you're doing that, you might as well wrap them inside a label and just set the input to position:absolute.

Is one better than the other?  Just asking because I don't really know.  ;-)

Thank you both! Getting rid of the whitespace between them did not work.   Wrapping them in a no-whitespace span did work, but took a lot of extra stuff. The whole point was to make fields disappear depending upon whether display was [show all], [show most], or [hide all].  So once I got the fields positioning correctly with the checkbox underneath, and everything wrapping around to the next line at the same time, obviously the css for the stuff underneath was not going to work anymore, because the tested condition was no longer a parent of the fields to be displayed, it was an "uncle" or something. So I duplicated the conditions, one set wrapped up in spans to display correctly, and another set hidden on a lower level.  Then I learned you can't have two sets of radio buttons with the same name, so I converted the "control" version to checkboxes, and all is working fine.  But it took double the amount of code and css.  <span style="white-space:nowrap;"><b>Details </b> <input type="radio" name="attr_show-SP-details" class="sheet-hideIfThisChecked sheet-display-show-all"  value="1" checked="true" title="Show All - All the details are displayed, including fields only used during set-up that is not needed during play." /><span class="sheet-option"></span> <input type="radio" name="attr_show-SP-details" class="sheet-hideIfThisChecked sheet-display-show-most" value="2" title="Show Most - The details used during play are displayed, but not the fields that are usually needed only during initial setup."/><span class="sheet-option"></span> <input type="radio" name="attr_show-SP-details" class="sheet-hideIfThisChecked sheet-display-hide-all"  value="3" title="Hide All - Only a single line of the most important information is displayed, all the details are hidden." /><span class="sheet-option"></span>      <!-- You need a blank span here for the Show/Hide css code to work with  --> </span> <input type="checkbox" name="attr_show-SP-details" class="sheet-hidden sheet-control-show-all"  value="1" /> <input type="checkbox" name="attr_show-SP-details" class="sheet-hidden sheet-control-show-most" value="2" /> <input type="checkbox" name="attr_show-SP-details" class="sheet-hidden sheet-control-hide-all"  value="3" /> Thank you both!

Once again, I have lots of trouble with understanding what is going on with positioning, and have never experimented with absolute positioning.  So just so that I understand...  I would set position: absolute and left: 0px; top: 0px on both the <input> and the inner <span> and then they would both start at the exact same spot of the outer <span> or <label>? I am not certain if it is actually better than what I have, since it still needs to be wrapped inside a span, which means it can't be directly used as a css controller for following fields. I really have to echo Vince's question, why would it be considered better?