title: Responsive Periodic Table of Elements in HTML/CSS
body: <p>Lately, I've been studying a lot about responsive design in HTML/CSS and decided to try to code the periodic table of elements in HTML/CSS in order to practice. I have the basic structure of the table (Using mostly <code>div</code> elements) but I'm majorly lacking a responsive flow. I've tried using % and it's still being stubborn. Any nudge in the right direction would be greatly appreciated.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
          &lt;title&gt; Periodic Table of Elements, in CSS! &lt;/title&gt; 
      &lt;/head&gt; 
      &lt;body&gt;
          &lt;section&gt;
              &lt;div id="container"&gt;
              &lt;div id="panelOne"&gt;
                  &lt;div class="box"&gt; H &lt;/div&gt; 
                  &lt;div class="box"&gt; Li &lt;/div&gt; 
                  &lt;div class="box"&gt; Na &lt;/div&gt; 
                  &lt;div class="box"&gt; K &lt;/div&gt; 
                  &lt;div class="box"&gt; Rb &lt;/div&gt; 
                  &lt;div class="box"&gt; Cs &lt;/div&gt; 
                  &lt;div class="box"&gt; Fr &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div id="panelTwo"&gt;
                  &lt;div class="box"&gt; Be &lt;/div&gt; 
                  &lt;div class="box"&gt; Mg &lt;/div&gt; 
                  &lt;div class="box"&gt; Ca &lt;/div&gt; 
                  &lt;div class="box"&gt; Sr &lt;/div&gt; 
                  &lt;div class="box"&gt; Ba &lt;/div&gt; 
                  &lt;div class="box"&gt; Ra &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelThree"&gt;
                  &lt;div class="box"&gt; Sc &lt;/div&gt; 
                  &lt;div class="box"&gt; Y &lt;/div&gt; 
                  &lt;div class="box"&gt; X &lt;/div&gt; 
                  &lt;div class="box"&gt; X &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelThree"&gt;
                  &lt;div class="box"&gt; Ti &lt;/div&gt; 
                  &lt;div class="box"&gt; Zr &lt;/div&gt; 
                  &lt;div class="box"&gt; Hf &lt;/div&gt; 
                  &lt;div class="box"&gt; Rf &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelThree"&gt;
                  &lt;div class="box"&gt; V &lt;/div&gt; 
                  &lt;div class="box"&gt; Nb &lt;/div&gt; 
                  &lt;div class="box"&gt; Ta &lt;/div&gt; 
                  &lt;div class="box"&gt; Db &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelThree"&gt;
                  &lt;div class="box"&gt; Cr &lt;/div&gt; 
                  &lt;div class="box"&gt; Mo &lt;/div&gt; 
                  &lt;div class="box"&gt; W &lt;/div&gt; 
                  &lt;div class="box"&gt; Sg &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelThree"&gt;
                  &lt;div class="box"&gt; Mn &lt;/div&gt; 
                  &lt;div class="box"&gt; Tc &lt;/div&gt; 
                  &lt;div class="box"&gt; Re &lt;/div&gt; 
                  &lt;div class="box"&gt; Bh &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelThree"&gt;
                  &lt;div class="box"&gt; Fe &lt;/div&gt; 
                  &lt;div class="box"&gt; Ru &lt;/div&gt; 
                  &lt;div class="box"&gt; Os &lt;/div&gt; 
                  &lt;div class="box"&gt; Hs &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelThree"&gt;
                  &lt;div class="box"&gt; Co &lt;/div&gt; 
                  &lt;div class="box"&gt; Rh&lt;/div&gt; 
                  &lt;div class="box"&gt; Ir &lt;/div&gt; 
                  &lt;div class="box"&gt; Mt &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelThree"&gt;
                  &lt;div class="box"&gt; Ni &lt;/div&gt; 
                  &lt;div class="box"&gt; Pd &lt;/div&gt; 
                  &lt;div class="box"&gt; Pt &lt;/div&gt; 
                  &lt;div class="box"&gt; Ds &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelThree"&gt;
                  &lt;div class="box"&gt; Cu &lt;/div&gt; 
                  &lt;div class="box"&gt;Ag &lt;/div&gt; 
                  &lt;div class="box"&gt; Au &lt;/div&gt; 
                  &lt;div class="box"&gt; Rg &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelThree"&gt;
                  &lt;div class="box"&gt; Zn &lt;/div&gt; 
                  &lt;div class="box"&gt; Cd &lt;/div&gt; 
                  &lt;div class="box"&gt; Hg &lt;/div&gt; 
                  &lt;div class="box"&gt; Cn &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelFour"&gt;
                  &lt;div class="box"&gt; B &lt;/div&gt; 
                  &lt;div class="box"&gt; Al &lt;/div&gt; 
                  &lt;div class="box"&gt; Ga &lt;/div&gt; 
                  &lt;div class="box"&gt; In &lt;/div&gt; 
                  &lt;div class="box"&gt; Ti &lt;/div&gt; 
                  &lt;div class="box"&gt; Uut &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelFour"&gt;
                  &lt;div class="box"&gt; C &lt;/div&gt; 
                  &lt;div class="box"&gt; Si &lt;/div&gt; 
                  &lt;div class="box"&gt; Ge &lt;/div&gt; 
                  &lt;div class="box"&gt; Sn &lt;/div&gt;
                  &lt;div class="box"&gt; Rb &lt;/div&gt; 
                  &lt;div class="box"&gt; Fl &lt;/div&gt;  
              &lt;/div&gt;
              &lt;div class="panelFour"&gt;
                  &lt;div class="box"&gt;N &lt;/div&gt; 
                  &lt;div class="box"&gt;P &lt;/div&gt; 
                  &lt;div class="box"&gt;As &lt;/div&gt; 
                  &lt;div class="box"&gt;Sb &lt;/div&gt; 
                  &lt;div class="box"&gt; Bi &lt;/div&gt; 
                  &lt;div class="box"&gt; Uup &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelFour"&gt;
                  &lt;div class="box"&gt; O &lt;/div&gt; 
                  &lt;div class="box"&gt; S &lt;/div&gt; 
                  &lt;div class="box"&gt; Se &lt;/div&gt; 
                  &lt;div class="box"&gt; Te &lt;/div&gt; 
                  &lt;div class="box"&gt; Po &lt;/div&gt; 
                  &lt;div class="box"&gt; Lv &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="panelFour"&gt;
                  &lt;div class="box"&gt; F &lt;/div&gt; 
                  &lt;div class="box"&gt; Cl &lt;/div&gt; 
                  &lt;div class="box"&gt; Br &lt;/div&gt; 
                  &lt;div class="box"&gt; I &lt;/div&gt; 
                  &lt;div class="box"&gt; At &lt;/div&gt; 
                  &lt;div class="box"&gt; Uus &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div id="panelFive"&gt;
                  &lt;div class="box"&gt; He &lt;/div&gt; 
                  &lt;div class="box"&gt; Ne &lt;/div&gt; 
                  &lt;div class="box"&gt; Ar &lt;/div&gt; 
                  &lt;div class="box"&gt; Kr &lt;/div&gt; 
                  &lt;div class="box"&gt; Xe &lt;/div&gt; 
                  &lt;div class="box"&gt; Rn &lt;/div&gt; 
                  &lt;div class="box"&gt; Uuo &lt;/div&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div id="lowerContainer"&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
              &lt;div class="bottom"&gt;
                  &lt;div class="box"&gt; La &lt;/div&gt; 
                  &lt;div class="box"&gt; Ac &lt;/div&gt; 
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;/section&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS:</strong> </p>
  
  <pre><code>    body{
      font-size: 16px;
  }
  section{
      width: 1500px;
      max-width: 90%;
      margin: 0px auto;
  }
  #container{
      width: 1400px;
  }
  .box{
      border: 3px solid black; 
      max-width: 50px;
      max-height: 50px; 
      padding: 10px;
      line-height: 50px; 
      text-align: center; 
      font-size: 1.63em;
  }
  
  #panelOne{
      float: left; 
  }
  
  #panelTwo{
      float: left; 
      position: relative; 
      top: 75px; 
  }
  
  .panelThree{
      float: left; 
      position: relative; 
      top: 225px; 
  }
  
  .panelFour{
      float: left; 
      position: relative; 
      top: 75px; 
  }
  
  #panelFive{
      float: left; 
  }
  
  #lowerContainer{
      float: right; 
      margin-top: 20px;
  }
  
  .bottom{
      float: left; 
  }
  </code></pre>
  
  <p>JSFiddle <a href="http://jsfiddle.net/cqkAd/" rel="nofollow">http://jsfiddle.net/cqkAd/</a></p>