title: HTML radio buttons will not display side by side
body: <p>I'm having some trouble with my HTML form, I've tried looking it up and looking for solutions online and the "solutions" I found did not work for me. The issue that I am having is that my Radio Buttons are not displaying side-by-side. And i believe I know why, but if i get of what's causing it, it mucks up the rest of my form.</p>
  
  <p>Here is my HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  
  &lt;html&gt;
  &lt;head&gt;
  
      &lt;title&gt;Survey&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" href="P9Style.css"&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;h1 align="Center"&gt;
          SURVEY
      &lt;/h1&gt;
  &lt;/body&gt;
  
  &lt;form method="post" action="http://webdevbasics.net/scripts/demo.php"&gt;
  
      &lt;br&gt;
  
      &lt;label for="myName"&gt;Name:&lt;/label&gt;
      &lt;input type="text" name="myName" id="Name"&gt;
  
      &lt;label for="myEmail"&gt;Email:&lt;/label&gt;
      &lt;input type="text" name="myEmail" id="Email"&gt;
  
      &lt;br&gt;&lt;br&gt;
  
      &lt;label for="Favorite_Browser"&gt;Favorite Browser:&lt;/label&gt;
      &lt;select size="1" name="Favorite_Browser" id="Favorite Browser"&gt;
          &lt;option value="Internet Explorer"&gt;Internet Explorer&lt;/option&gt;
          &lt;option value="Mozzila Firefox"&gt;Mozzila Firefox&lt;/option&gt;
          &lt;option value="Apple Safari"&gt;Apple Safari&lt;/option&gt;
          &lt;option value="Opera Browser"&gt;Opera Browser&lt;/option&gt;
      &lt;/select&gt;
  
  
      &lt;br&gt;&lt;br&gt;
  
  
      Select your favorite Programming Language:&lt;br&gt;
      &lt;input type="radio" name="fav_Lang" id="fav_Lang" value="VB.net"&gt;VB.Net
      &lt;input type="radio" name="fav_Lang" id="fav_Lang" value="Java"&gt;Java
      &lt;input type="radio" name="fav_Lang" id="fav_Lang" value="HTML"&gt;HTML
      &lt;input type="radio" name="fav_Lang" id="fav_Lang" value="C++"&gt;C++
      &lt;input type="radio" name="fav_Lang" id="fav_Lang" value="Ruby"&gt;Ruby
  
      &lt;br&gt;&lt;br&gt;
  
      &lt;label for="myComments"&gt;Comments:&lt;/label&gt;
      &lt;textarea name="myComments" id="Comments:" rows="3" cols="20"&gt;&lt;/textarea&gt;
  
  
  
      &lt;input id ="mySubmit" type="submit" value="Submit"&gt;
  &lt;br&gt;
  &lt;/form&gt;
  
  &lt;!-- Footer space--&gt;
  &lt;div id="footer"&gt;
      &lt;br&gt;
      Copyright &amp;copy; 2013 Richard Paulicelli
      &lt;br&gt;
      You can send me an email at &lt;a href="mailto:richardpaulicelli@yahoo.com"&gt;richardpaulicelli@yahoo.com&lt;/a&gt;
      &lt;br&gt;&lt;br&gt;
  &lt;/div&gt;
  &lt;!-- End Footer space--&gt;
  </code></pre>
  
  <p></p>
  
  <p>Here is my CSS style sheet code:</p>
  
  <pre><code>form { background-color: #eaeaea;
         font-family: Arial, sans-erif;
      width: 350px;
      padding: 10; }
  
  label { float: left;
      width: 100px;
      display: block;
      clear: left;
      text-align: right;
      padding-right: 10px;
      margin-top: 10px; }
  
  input, textarea, select { margin-top: 10px; display: block; }
  
  
  #mySubmit { margin-left: 110px; }
  
  #footer { background-color: #CCCFFF;
      text-align: center;
      color: #333333; 
      font-size: 1em; 
      clear: both; }
  </code></pre>
  
  <p>Now what I believe is causing the problem is in my CSS style sheet and it's this line right here:</p>
  
  <pre><code>    input, textarea, select { margin-top: 10px; display: block; }
  </code></pre>
  
  <p>However, if I remove <code>input</code> it fixes the radio buttons but the rest of my form is messed up.</p>
  
  <p>I have tried doing <code>input.radio { display: inline; }</code> </p>
  
  <p>I have tried doing <code>#fav_Lang input.radio { display: inline; }</code> (fav_Lang being the radio buttons name and ID).</p>
  
  <p>So i'm at a total loss on what to do, any help would be greatly appreciated. Thanks :)</p>