title: Small image is overlapping my navigation?
body: <p>With character: <a href="http://jsfiddle.net/nuu6g/" rel="nofollow">http://jsfiddle.net/nuu6g/</a></p>
  
  <p>For some reason, I cannot click on my text on my navigation menu. This is most likely due to the (missing) image on the left, which I will refer to as the "character." However, when I remove the character, I can indeed click on the text again. </p>
  
  <p>Without character: <a href="http://jsfiddle.net/aN5s5/" rel="nofollow">http://jsfiddle.net/aN5s5/</a></p>
  
  <pre><code>body {
      background:grey;
  }
  
  .topContainer {
      width: 1000px;
      height: 125px;
      margin: 0 auto;
      padding-bottom: 20px;
  }
  #logo {
      float: left;
      padding: 10px 10px;
  }
  /* Navigation */
   #navigation {
      background: #107AEB;
      background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#107AEB), to(#106FEB));
      background: -webkit-linear-gradient(top, #107AEB, #106FEB);
      background: -moz-linear-gradient(top, #107AEB, #106FEB);
      background: -ms-linear-gradient(top, #107AEB, #106FEB);
      background: -o-linear-gradient(top, #107AEB, #106FEB);
      border: 2px solid rgba(16, 86, 235, 0.9);
      border-radius: 15px;
      float: right;
      width: 455px;
      height: 55px;
      margin-top: 22px;
      z-index: 1;
  }
  #navigation ul {
      display: inline-block;
      position: absolute;
      list-style-type: none;
  }
  #navigation li {
      display: inline-block;
  }
  #navigation a {
      color: #FFF;
      font-family: SEGOEUIL, Arial, sans-serif;
      text-shadow: 0 1px 0 #000;
      text-align: center;
      padding: 5px 10px;
      font-size: 17px;
  }
  #navigation a:hover {
      background: rgba(16, 86, 235, 0.9);
      border-radius: 5px;
  }
  #navigation a:active {
      text-decoration: none;
  }
  #navigation a:link {
      text-decoration: none;
  }
  .character {
      z-index: 2;
      padding: 0 275px;
      float: left;
      position: absolute;
      width: 187px;
      height: 174px;
  }
  /* Wrapper */
   #wrapper {
      background: #FFF;
      /*rgba(255, 255, 255, 0.85);*/
      border-top-left-radius: 25px;
      border-top-right-radius: 25px;
      width: 1000px;
      height: 1200px;
      position: relative;
      z-index: 3;
      overflow: hidden;
      margin: 0 auto;
  }
  #photoContent {
      background: #ffcc00;
      border: 1px solid #b62100;
      border-radius: 8px;
      width: 781px;
      height: 231px;
      margin-top: 12px;
      display: block;
      margin-left: auto;
      margin-right: auto;
  }
  .displayPhoto {
      width: 771px;
      height: 221px;
      border: 0;
      border-radius: 8px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: 3px;
      border: 1px solid #b62100;
  }
  #leftContent {
      padding-top: 15px;
      width: 500px;
      height: 140px;
      float: left;
      padding-left: 45px;
  }
  .title {
      font-family: Arial, sans-serif;
      color: #3abfee;
      font-size: 20px;
  }
  .desc {
      color: #575757;
      font-size: 15px;
      font-family: Arial, sans-serif;
  }
  #rightContent {
      padding-top: 15px;
      width: 300px;
      height: 140px;
      float: right;
      padding-right: 25px;
  }
  #flashContent {
      padding-left: 25px;
      width: 700px;
      height: 500px;
  }
  hr {
      width: 750px;
      height: 1px;
      background: #CCC;
      border: none;
      margin-top: 10px;
  }
  /* Bottom Wrapper */
   #bwCont {
      width: 1000px;
      height: 500px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      margin-top: 10px;
  }
  .galleryCont {
      display: block;
      margin-left: auto;
      margin-right: auto;
      width: 650px;
      height: 150px;
  }
  .galleryImgCont {
      width: 175px;
      height: 175px;
      float: left;
  }
  .galleryTitle {
      font-family:'Exo 2', sans-serif;
      font-size: 17px;
      color: #333;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
      padding-top: 145px;
  }
  .galleryDesc {
      font-family:'Exo 2', sans-serif;
      font-size: 15px;
      color: #333;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
  }
  
  #galleryImg {
      width: 175px;
      height: 125px;
      border: 5px solid #F5F5F5;
      box-shadow: 0 0 7px;
      border-radius: 5px;
      float: left;
  }
  .readMore {
      width: 175px;
      height: 50px;
      background: #000;
      border: 0;
      border-radius: 5px;
      padding: 10px 10px;
      color: #FFF;
      font-family:'SEGOEUIL', sans-serif;
      font-size: 17px;
  }
  .readMore:hover {
      background: #202020;
  }
  </code></pre>
  
  <p>Please help me, thanks! Also, just an extra question; is there any way I can keep the read more buttons inline, instead of like a staircase? Sorry, but thank you!</p>