title: Large gap between text, how to fix?
body: <p>I have two div that when previewed in a browser have a large gap between them.</p>
  
  <p>Code:</p>
  
  <pre><code>&lt;div id="title-1"&gt;
          &lt;p&gt;XXX is pleased to announce the launch of our Social Enterprise - Experience Us&lt;/p&gt;
      &lt;/div&gt;
      &lt;div id="maindescription-1"&gt;
          &lt;p&gt;XXX are conducting unique tours to celebrate us, the beating heart of our culture in Scotland.  We will be 
          taking people on a journey through Glasgow, Scotland on a guided tour about the stories of the locals and pioneers that
          made Glasgow what it is today, and then expanding the experiences with tasting tours of the variety of delicious cuisines
          on offer.  Please see below for more information:&lt;/p&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#title-1 {
      font: normal normal bold 100% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
      float: left;
      width: 850px;
      padding: 10px;
      color: #FFFF00;
      text-align: justify;
      vertical-align: baseline;
  }
  #maindescription-1 {
      font: 100% "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande", "Lucida Sans", Arial, sans-serif;
      float: left;
      width: 850px;
      padding: 10px;
      color: #FFFFFF;
      text-align: justify;
      vertical-align: baseline;
  }
  </code></pre>
  
  <p>How to fix this problem?</p>