title: Spacing issue with HTML and floats
body: <p>first time poster here. I've been freshing up on my HTML and CSS and I've encountered some small problems. </p>
  
  <p>If you look at the link then you can see some unwanted spacing between the pink colored "My Gaming Life" and the plum colored "My Lack of Religion". Those 2 paragraphs have an id of right and I've set them to float:right as so; 
  <code>#right {float:right;}</code>
  Ive done the same with the elements on the left side like so: </p>
  
  <pre><code>#left {float:left;}
  </code></pre>
  
  <p>I will put a full list of the code below and a picture of the website:</p>
  
  <p>The CSS: </p>
  
  <pre><code>p {
      font-size: 2em;
      font-family: "Poiret One", cursive;
      color: #D6EBFF;
  }
  ul {
      border:0.2em solid #1f2f31;
      border-radius: 10px;
      background-color: rgba(123, 321, 78, .2);
      padding-right: 5ps;
  }
  li {
      font-size: 2em;
      font-family: "Poiret One", cursive;
      color: #D6EBFF;
  }
  h1, h2, h3, h4, h5, h6 {
      font-size: 2em;
      font-family: "Poiret One", cursive;
      color: #D6EBFF;
  }
  #span1 {
      text-decoration: underline; 
  }
  #hello {
      margin-top: 1em;
      font-size: 3em;
  }
  #wonder {
      font-family: "Poiret One", cursive;
      font-weight: bold;
      font-size: 2.5em;
  }
  #mystery {
      font-size: 2em;
      font-family: "Dancing Script", cursive;
      padding-bottom: 5px;
      margin-bottom: 15px;
  }
  .intro {
      background-color: rgba(240,230,140, 0.8);
  }
  .intro p {
      color: #000029;
  }
  #img1 {
      width: 75px;
      height: 75px;
      margin-right: 2px;
      margin-bottom: 5px;
  }
  .img_header {
      /*float: left;*/
      border: 2px solid #1f2f31;
      border-radius: 10px;
      background-color: rgba(255,69,0,0.3);
      width: 24%;
  }
  .img_header_container h3 {
      padding: 15px;
      margin-top: -15px;
      margin-bottom: -2px;
  }
  .picture {
      margin-left: 5px;
      margin-bottom: 5px;
  }
  .center {
      display: table;
      margin: auto;
  }
  .main_container {
      border:0.2em solid #1f2f31;
      border-radius: 10px;
      background-color: rgba(157, 139, 178, .5);
  }
  .main_container p {
      padding-left: 10px;
  }
  .list {
      width: 24%;
      /*float: left;*/
  }
  .img_header {
      width: 24%;
  }
  .main_content {
      /*float:right;*/
      width: 73%;
      border:0.2em solid #1f2f31;
      border-radius: 10px;
      margin-right: 10px;
      margin-top:17px;
      background-color: rgba(205, 120, 200, .5);
      margin-bottom: 5em;
  }
  .main_content_container {
      text-align: center;
      padding-bottom: 10px;
  }
  .main_content_container p {
      font-size: 1.5em;
      line-height: 170%;
      text-align: left;
      padding-left: 10px;
  }
  .main_content_container a {
      font-size: 2em;
      color: #D6EBFF;
  }
  .religion {
      /*float:right;*/
      width: 73%;
      border:0.2em solid #1f2f31;
      border-radius: 10px;
      margin-right: 10px;
      margin-top:17px;
      background-color: rgba(103, 0, 124, .5);
      margin-bottom: 5em;
  }
  .religion_container {
      text-align: center;
      padding-bottom: 10px;
  }
  .religion_container {
      font-size: 1.5em;
      line-height: 170%;
      text-align: left;
      padding-left: 10px;
  }
  .religion_container a {
      font-size: 2em;
      color: #D6EBFF;
  }
  #left {
      float: left;
  }
  #right {
      float: right;
  }
  body {
      background-image: url("http://orig01.deviantart.net/064f/f/2010/064/6/1/arcane_symbols_by_stinkmeaner.jpg");
      background-color: black;
      font-size: 100%;
  }
  </code></pre>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;div class="intro"&gt;
      &lt;div class="intro_container"&gt;
          &lt;p id="hello", class="center"&gt;Content &lt;/p&gt;
          &lt;p id="wonder", class="center"&gt;Content&lt;/p&gt;
          &lt;p id="mystery", class="center"&gt;Content&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="main"&gt;
      &lt;div class="main_container"&gt;
          &lt;p&gt;Content&lt;/p&gt;
      &lt;/div&gt;
  &lt;div class="list" id="left"&gt;
      &lt;div class="list_container"&gt;
      &lt;ul&gt;
          &lt;li&gt;MenuItem&lt;/li&gt;
          &lt;li&gt;MenuItem&lt;/li&gt;
          &lt;li&gt;MenuItem&lt;/li&gt;
      &lt;/ul&gt; 
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="main_content" id="right"&gt;
      &lt;div class="main_content_container"&gt;
      &lt;h2&gt;title&lt;/h2&gt;
      &lt;p&gt;Some content&lt;/p&gt;&lt;br&gt;
  
      &lt;a href="test_article1.html"&gt;Read more!&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="img_header" id="left"&gt;
      &lt;div class="img_header_container"&gt;
      &lt;h3&gt;Title&lt;/h3&gt;
      &lt;div class="picture"&gt;
      &lt;a href="http://example.com" target="_blank"&gt;&lt;img src="" id="img1"&gt;&lt;/a&gt;
  
      &lt;a href="http://example.com" target="_blank"&gt;&lt;img src="" id="img1"&gt;&lt;/a&gt;
  
      &lt;a href="http://example.com" target="_blank"&gt;&lt;img src="" id="img1"&gt;&lt;/a&gt;
  
      &lt;a href="http://example.com" target="_blank"&gt;&lt;img src="" id="img1"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="religion" id="right"&gt;
      &lt;div class="religion_container"&gt;
      &lt;h2&gt;Title&lt;/h2&gt;
      &lt;p&gt;Some content&lt;/p&gt;&lt;br&gt;
  
      &lt;a href=""&gt;Read more!&lt;/a&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Do you have any clues ?</p>