title: Custom RadioSelect Rendering
body: <p>I'm trying to make Django's RadioSelect widget render horizontally. I found the following SO post, that I thought had solved the problem: <a href="https://stackoverflow.com/questions/5935546/align-radio-buttons-horizontally-in-django-forms">Align radio buttons horizontally in django forms</a>, it basically states to use a custom Renderer, as follows:</p>
  
  <pre><code>class HorizontalRadioRenderer(forms.RadioSelect.renderer):
    def render(self):
      return mark_safe(u'\n'.join([u'%s\n' % w for w in self]))
  
  class MyForm(ModelForm):
      select=forms.ChoiceField(choices=CHOICES, widget=forms.RadioSelect(renderer=HorizontalRadioRenderer
  </code></pre>
  
  <p>But when I implement this, I still get the radio selection buttons rendering vertically. Here's a screenshot. <img src="https://i.stack.imgur.com/I3dNw.png" alt="enter image description here"></p>
  
  <p>This is a seriois problem for my form. Any idea why it isn't working correctly? If it matters, the form is being rendered in a table. </p>
  
  <p>Thanks</p>
  
  <p>UPDATE:</p>
  
  <p>Ok, I've tried something else. The renderer is now:</p>
  
  <pre><code>def render(self):
      internal=''.join(['&lt;span id="radio"&gt;%s&lt;/span&gt;' % w for w in self])
      return mark_safe(u'%s' %internal)
  </code></pre>
  
  <p>and I've added the CSS to my stylesheet: </p>
  
  <pre><code>#radio{
     width: 100px;
     float: left;
  }
  </code></pre>
  
  <p>This renders the RadioBoxes inline, and <em>looks</em> great. But now there's an even bigger problem. As seen in my screenshot above, I have 2 choices, Yes and N/A. Right now, if I click on either yes or N/A, N/A gets selected. I thought this might be because they were both in spans with the same id, but if I change it to <code>class="radio"</code> the same thing happens. If I remove <code>float: left</code> from the CSS, then it works normally (but, of course, isn't displayed horizontally). Any idea what's causing this? </p>