title: CSS - DIV navigation menu to replace old TABLE menu, element size issue
body: <p>I've been taking some time these last couple of weeks to update my HTML/CSS knowledge.  As a result, I've been learning how to achieve layout that I will have previously done with tables, with DIVs instead.</p>
  
  <p>For the most part it's been fine, but I have run in to a few snags trying to replicate a style of navigation menu that uses the following code as a table:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="navigation"&gt;
      &lt;table&gt;
          &lt;tr&gt;
              &lt;td&gt;&lt;a href="index.php"&gt;home&lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;&lt;a href="about.php"&gt;about&lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;&lt;a href="music.php"&gt;music&lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;&lt;a href="geeking.php"&gt;geeking&lt;/a&gt;&lt;/td&gt;
              &lt;td&gt;&amp;nbsp;&lt;/td&gt;
              &lt;td&gt;&lt;a href="contact.php"&gt;contact&lt;/a&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.navigation{
      text-align: center;
      color: hsla(200,50%,45%,0.6);
      margin: auto;
      font-family: monospace;
      letter-spacing: 2px;
      position: relative;
      top: -13px;
      margin: 20px auto 20px auto;
      width: 60%;
  }
  
  .navigation table{
      height: 70px;
  }
  
  th{
  text-align: center;
  color: hsla(180,50%,45%,0.4);
  font-size: 1.1em;
  }
  
  table{
  border-collapse: collapse;
  margin: auto;
  margin-top: 0px;
  }
  
  table,th{
  border: 0px solid black;
  padding: 5px;
  }    
  
  
  .navigation a{
      text-decoration: none;
      color: hsla(200,50%,45%,0.6);
      background-color: transparent, white;
      text-transform: lowercase;
      font-size: 1.2em;
      -webkit-transition: all 0.4s linear; 
      -moz-transition: all 0.4s linear; 
      -o-transition: all 0.4s linear; 
      -ms-transition: all 0.4s linear; 
      transition: all 0.4s linear;
      letter-spacing: 0px;
      width: 50px;
      height: 100px;
  }
  
  .navigation a:hover{
      color: white;
      -webkit-transition: all 0.2s linear; 
      -moz-transition: all 0.2s linear; 
      -o-transition: all 0.2s linear; 
      -ms-transition: all 0.2s linear; 
      transition: all 0.2s linear;
      width: auto;
      height: auto;
      font-size: 2em;
      font-weight: bold;
      letter-spacing: 2px;
      text-shadow:    0 0 20px hsla(180,50%,40%,.6),
                      0 0 40px hsla(200,50%,45%,.8);
  }
  </code></pre>
  
  <p>You can view this page live here: <a href="http://benjaminsherwood.co.uk/index.php" rel="nofollow">http://benjaminsherwood.co.uk/index.php</a>
  To be clear - this is the behavior I would like for my menu - for a hovered-over element to increase in size and letter-spacing, and push the other elements left and right, but staying on the same vertical plain.  It's the vertical plain part that I am stuck with.</p>
  
  <p>Here's the code I am using to try and create the same menu with DIVs:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="menu"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="index.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;About&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Music&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Geeking&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href=""&gt;Contact&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.menu{
      position: fixed;
      left:0; 
      right:0; 
      top:0;
      margin: auto;
      text-transform: lowercase;
      text-align: center;
  }
  
  .navigation table{
      height: 70px;
  }
  
  .menu li{
      list-style: none outside none;
      display: inline;
  }
  
  .menu a{
      text-decoration: none;
      color: hsla(200,50%,45%,0.6);
      font-size:  1.2em;
      letter-spacing: 0px;
      -webkit-transition: all 0.4s ease; 
      -moz-transition: all 0.4s ease; 
      -o-transition: all 0.4s ease; 
      -ms-transition: all 0.4s ease; 
      transition: all 0.4s ease;
  }
  
  
  .menu a:hover{
      color: white;
      font-size: 2em;
      font-weight: 600;
      letter-spacing: 2px;
  
      -webkit-transition: all 0.2s ease; 
      -moz-transition: all 0.2s ease; 
      -o-transition: all 0.2s ease; 
      -ms-transition: all 0.2s ease; 
      transition: all 0.2s ease;
  
      text-shadow:    0 0 20px hsla(180,50%,40%,.6),
              0 0 40px hsla(200,50%,45%,.8);
  }
  </code></pre>
  
  <p>You can view this page live here: <a href="http://benjaminsherwood.co.uk/test.php" rel="nofollow">http://benjaminsherwood.co.uk/test.php</a></p>
  
  <p>I've been trying to figure this out all weekend - I've searched high and low for a solution, and applied different methods of creating that horizontal menu layout, and even ended up going to a friend who's quite good with CSS - but, no matter what I try, I cannot figure out how to achieve the DIV-based layout behaving in the same way as the TABLE one.</p>
  
  <p>It's almost as if the TABLE-based layout is applying the changes to the element from the center of the TD element, whilst the DIV-based layout is applying it from the top corner. As a result, the DIV-based layout seems to grow only downwards, instead of spreading, and as a result, the elements either side of it do not flow to the left and the right on the same horizontal plane, as is the case with the TABLE layout, but instead are pushed either left or right, and also pushed downwards.</p>
  
  <p>I'll be honest - I know that the solution could well be to just either accept how it works differently in the DIV style, or continue using the TABLE style... but I'm convinced it should be possible, and that I'm just missing something.</p>
  
  <p>The TABLE-style used to do something similar, until I defined:</p>
  
  <pre><code>.navigation table{
      height: 70px;
  }
  </code></pre>
  
  <p>after which, it started behaving. I can't figure out if doing the same in DIV-layout somewhere will fix the issue... I've tried setting the height of various elements, but nothing seems to make a difference.</p>
  
  <p>Sorry about the super-long question. I've really avoided having to ask a question myself, but I really have just hit a brick wall.</p>