title: Menu left and menu right
body: <p>Trying to have 2 menus one at the left and one at the right but cant really complete this tasks since my right menu is going to the left, my css file</p>
  
  <pre><code>body
  {
      color: #FFFFFF;
      margin: 0;
      padding: 0;
      text-align: left;
      background: #141414 url('/public/images/background/body_bg.png') top left repeat;
      font: 12px Tahoma,Arial,Hevetica,Sans-serif;
      font-size: 12px;
      padding: 10px;
  }
  
  .left-menu, .right-menu
  {
      position: absolute;
  
      text-align: center;
      text-decoration: none;
      top: 197px;
      width: 128px;
      max-width: 128px;
  }
  
  .left-menu ul, .right-menu ul
  {
      list-style-type: none;
      margin: 0px;
      padding: 0px;
      display: block;
      text-align: left;
  }
  
  .left-menu ul li.header, .right-menu ul li.header
  {
      line-height: 29px;
      height: 29px;
      color: white;
      background-image: url('/public/images/background/head.jpg');
      font: 15px 'Trebuchet MS',Tahoma,Arial,Helvetica,Sans-serif;
      padding: 6px 0 0 10px;
      margin: 0;
      border-bottom: 1px solid #000000;
      border-right: 1px solid #000000;
  
  }
  
  .left-menu ul li a, .right-menu ul li a
  {
      background: #CD0000;
      background: rgb(0,0,0);
      background: rgba(0,0,0,0.6);
      filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000,endColorstr=#99000000);
      -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
      border: 1px solid #000000;
      border-top: 0px;
      height: 14px;
      padding: 4px;
      display: block;
      text-decoration: none;
      height: 14px;
  }
  
  .left-menu ul li a:hover, .right-menu ul li a:hover
  {
      color: #000000;
      background-color: #ffffff;
  }
  
  a:visited 
  {
      color: #ffcc00;
      text-decoration: none;
  }
  
  a
  {
      color: #ffcc00;
      text-decoration: none;
  }
  
  .title
  {
      position: static;
      background: url('/public/images/background/title.jpg');
      height: 35px;
      color: white;
      font: 15px 'Trebuchet MS',Tahoma,Arial,Helvetica,Sans-serif;
      padding: 0 0 0 10px;
      margin: 0;
      border: 1px solid #000000;
      border-top: 0;
      line-height: 35px;
      background-image: url('/public/images/background/title.jpg');
      background-position: left;
      background-repeat: repeat-x;
      margin-left: 140px;
      margin-right: 140px;
      text-align: center;
  }
  
  #header
  {
      align: middle;
      position: static;
      height: 183px;
      max-height: 183px;
      background-color: transparent;
  }
  
  table.hovertable
  {
      font-family: verdana,arial,sans-serif;
      font-size: 11px;
      color: #BDBDBD;
  }
  
  table.hovertable td
  {
      filter: alpha(opacity=50);
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      opacity: 0.5;
      background-color: black;
      height: 181px;
      max-height: 181px;
      text-align: center;
      border-width: 1px;
      padding: 0;
      border-style: solid;
      border-color: #290008;
  }
  </code></pre>
  
  <p>And my index.html</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
     "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;HTML&gt;
     &lt;HEAD&gt;
          &lt;link rel="stylesheet" href="{{ URL::to('/') }}/style/style.css" type="text/css" media="screen"&gt;
          &lt;TITLE&gt;PokemonGarden - Online Pokemon RPG&lt;/TITLE&gt;
     &lt;/HEAD&gt;
     &lt;BODY&gt;
        &lt;div class="header"&gt;
        &lt;center&gt;
        &lt;table align="center" class="hovertable"&gt;
        &lt;tbody&gt;&lt;tr&gt;
        &lt;td&gt;&lt;img src="{{ URL::to('/') }}/images/background/pball.png"&gt;&lt;br&gt;&lt;b&gt;Empty Slot&lt;/b&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="{{ URL::to('/') }}/images/background/pball.png"&gt;&lt;br&gt;&lt;b&gt;Empty Slot&lt;/b&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="{{ URL::to('/') }}/images/background/pball.png"&gt;&lt;br&gt;&lt;b&gt;Empty Slot&lt;/b&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="{{ URL::to('/') }}/images/background/pball.png"&gt;&lt;br&gt;&lt;b&gt;Empty Slot&lt;/b&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="{{ URL::to('/') }}/images/background/pball.png"&gt;&lt;br&gt;&lt;b&gt;Empty Slot&lt;/b&gt;&lt;/td&gt;
        &lt;td&gt;&lt;img src="{{ URL::to('/') }}/images/background/pball.png"&gt;&lt;br&gt;&lt;b&gt;Empty Slot&lt;/b&gt;&lt;/td&gt;
        &lt;/tr&gt;
        &lt;/tbody&gt;&lt;/table&gt;
        &lt;/center&gt;
        &lt;/div&gt;
        &lt;div class="left-menu"&gt;
          &lt;ul&gt;
              &lt;li class="header"&gt;Main menu&lt;/li&gt;
              &lt;li&gt;&lt;a href="profile.php"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="profile.php"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="profile.php"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="profile.php"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div class="title"&gt;Players Online - Past 5 minutes&lt;/div&gt;
        &lt;div class="right-menu"&gt;
           &lt;ul&gt;
              &lt;li class="header"&gt;Main menu&lt;/li&gt;
              &lt;li&gt;&lt;a href="profile.php"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="profile.php"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="profile.php"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="profile.php"&gt;Homepage&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/div&gt;
     &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>The current design should be</p>
  
  <p>1ST MENU -- DIV WITH TEXT -- 2ND MENU</p>
  
  <p>But my 2ND Menu is going to the same place of the 1ST MENU.</p>