title: 3 column layout not displaying properly when using <ul>
body: <p>I have a 3 column layout that works fine when I use the <p> tag but all floats left when I used . I believe it has something to do with how wide my content is in each group but I don't know how to fix it! I've included screenshots and my code down below. Thanks!</p>
  
  <p>Working with paragraph tag</p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="anim"&gt;
  
           &lt;div class="spacer"&gt;
  
              &lt;div class="graphicOne"&gt;
  
                  &lt;p class="graphicHead"&gt;&lt;img src="images/dollarSign.png" width="23px" height="47px"/&gt;&lt;/p&gt;
  
                  &lt;p class="graphicBody"&gt;Look ma i'm road kill look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. we got no food we got no money and our pets heads are falling off! haaaaaaarry. we're going for a ride on the information super highway. your entrance was good, his was better. it's because i'm green isn't it! kinda hot in these rhinos.&lt;/p&gt;
                  &lt;p class="graphLink"&gt;&lt;a class="graphLink"  href="#windSection"&gt;Explore &gt;&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="graphicThree"&gt;
  
                  &lt;p class="graphicHead"&gt;&lt;img src="images/moreSign.png" width="40.25px" height="47px"/&gt;&lt;/p&gt;
  
                  &lt;p class="graphicBody"&gt;Look ma i'm road kill look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. we got no food we got no money and our pets heads are falling off! haaaaaaarry. we're going for a ride on the information super highway. your entrance was good, his was better. it's because i'm green isn't it! kinda hot in these rhinos.&lt;/p&gt;
                  &lt;p class="graphLink"&gt;&lt;a class="graphLink"  href="#nuclearSection"&gt;Explore &gt;&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="graphicTwo"&gt;
  
                  &lt;p class="graphicHead"&gt;&lt;img src="images/mapMarker.png" width="28px" height="47px"/&gt;&lt;/p&gt;
  
                  &lt;p class="graphicBody"&gt;Look ma i'm road kill look at that, it's exactly three seconds before i honk your nose and pull your underwear over your head. we got no food we got no money and our pets heads are falling off! haaaaaaarry. we're going for a ride on the information super highway. your entrance was good, his was better. it's because i'm green isn't it! kinda hot in these rhinos. &lt;/p&gt;
                  &lt;p class="graphLink"&gt;&lt;a  class="graphLink" href="#solarSection"&gt;Explore &gt;&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.anim {
      position:relative;
      display: table;
      width:75%;
      margin:auto;
      height:50%;
      overflow:hidden;
      font-size:16px;
  }
  
  .spacer{
      position:absolute;
      top:50px;    
  }
  
  .graphicOne {
      display: table;
      float:left;
      width:30%;
      height:300px;
  }
  
  .graphicTwo {
      display: table;
      width:30%;
      margin:0 auto;
      height:300px;
  
  }
  
  .graphicThree {
      display: table;
      float:right;
      width:30%;
      height:300px;
  }
  
  .graphicHead {
      padding-top:10px;
      padding-bottom:15px;
      text-align:center;
      font-weight:400;
      font-family: 'Doppio One', sans-serif;
      color:#666;
      text-decoration:underline;    
  }
  
  .graphicBody {
      width:90%;
      margin:auto;
      color:#666;
      font-family: 'Lato', sans-serif;
      text-align:center;   
  }
  
  .graphLink {
      text-align:center;
      padding-top:20px;
      font-weight:400;
      font-family: 'Doppio One', sans-serif;
      color:#666;
      text-decoration:underline;   
  }
  </code></pre>
  
  <p>Correct Display: <a href="http://imgur.com/LEMkisg" rel="nofollow">http://imgur.com/LEMkisg</a></p>
  
  <p>Non Working with unordered list tag</p>
  
  <p>Html</p>
  
  <pre><code>&lt;div class="anim"&gt;
  
           &lt;div class="spacer"&gt;
  
              &lt;div class="graphicOne"&gt;
  
                  &lt;p class="graphicHead"&gt;&lt;img src="images/dollarSign.png" width="23px" height="47px"/&gt;&lt;/p&gt;
  
                  &lt;p class="graphicBody"&gt;
  
                      &lt;ul&gt;
                          &lt;li&gt;&lt;p class="graphText"&gt;&lt;span class="bold"&gt;Install Cost:&lt;/span&gt; null&lt;/p&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;p class="graphText"&gt;&lt;span class="bold"&gt;Maintenance:&lt;/span&gt; null&lt;/p&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;p class="graphText"&gt;&lt;span class="bold"&gt;Tax Incentive:&lt;/span&gt; null&lt;/p&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;p class="graphText"&gt;&lt;span class="bold"&gt;Total Savings:&lt;/span&gt; null&lt;/p&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
  
                  &lt;/p&gt;
                  &lt;p class="graphLink"&gt;&lt;a class="graphLink"  href="#windSection"&gt;Explore &gt;&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="graphicThree"&gt;
  
                  &lt;p class="graphicHead"&gt;&lt;img src="images/moreSign.png" width="40.25px" height="47px"/&gt;&lt;/p&gt;
  
                  &lt;p class="graphicBody"&gt;
  
                      &lt;ul&gt;
                          &lt;li&gt;&lt;p class="graphText"&gt;&lt;span class="bold"&gt;Best Location:&lt;/span&gt; null&lt;/p&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;p class="graphText"&gt;&lt;span class="bold"&gt;Needs:&lt;/span&gt; null&lt;/p&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;p class="graphText"&gt;&lt;span class="bold"&gt;Impact:&lt;/span&gt; null&lt;/p&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
  
                  &lt;/p&gt;
                  &lt;p class="graphLink"&gt;&lt;a class="graphLink"  href="#nuclearSection"&gt;Explore &gt;&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
              &lt;div class="graphicTwo"&gt;
  
                  &lt;p class="graphicHead"&gt;&lt;img src="images/mapMarker.png" width="28px" height="47px"/&gt;&lt;/p&gt;
  
                  &lt;p class="graphicBody"&gt;
                       &lt;ul&gt;
  
                          &lt;li&gt;&lt;p class="graphText"&gt;&lt;span class="bold"&gt;Best Location:&lt;/span&gt; null&lt;/p&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;p class="graphText"&gt;&lt;span class="bold"&gt;Needs:&lt;/span&gt; null&lt;/p&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;p class="graphText"&gt;&lt;span class="bold"&gt;Impact:&lt;/span&gt; null&lt;/p&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;p class="graphText"&gt;&lt;span class="bold"&gt;Impact:&lt;/span&gt; null&lt;/p&gt;&lt;/li&gt;
  
                      &lt;/ul&gt;
                  &lt;/p&gt;
                  &lt;p class="graphLink"&gt;&lt;a  class="graphLink" href="#solarSection"&gt;Explore &gt;&gt;&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.anim {
      position:relative;
      display: table;
      width:75%;
      margin:auto;
      height:50%;
      overflow:hidden;
      font-size:16px;
  }
  
  .spacer{
      position:absolute;
      top:50px;    
  }
  
  .graphicOne {
      display: table;
      float:left;
      width:30%;
      height:300px;
  }
  
  .graphicTwo {
      display: table;
      width:30%;
      margin:0 auto;
      height:300px;
  
  }
  
  .graphicThree {
      display: table;
      float:right;
      width:30%;
      height:300px;
  }
  
  .graphicHead {
      padding-top:10px;
      padding-bottom:10px;
      text-align:center;
  }
  
  .graphicBody{
      width:90%;
      margin:auto;
      color:#666;
      font-family: 'Lato', sans-serif;   
  }
  
  .graphText {
      font-size:18px;
      color:#666;
      font-family: 'Lato', sans-serif;
      text-align:center;
      padding-top:15px;
  }
  
  
  .graphLink {
      text-align:center;
      padding-top:20px;
      font-weight:700;
      font-family: 'Doppio One', sans-serif;
      color:#666;
      text-decoration:underline;
      font-size:24px;   
  }
  </code></pre>
  
  <p>non-working looks like: <a href="http://imgur.com/7Rkuqfy" rel="nofollow">http://imgur.com/7Rkuqfy</a>.</p>
  
  <p>Any help would be great! Thanks so much!</p>