title: put navigation inside content div
body: <p>I am seeking help from you to correct this webpage.
  If you look at the html and css posted below, you there are following unintended behavior:
  1) the galnavigation seats over the content. what I really want is:(if I consider the box as my webpage)</p>
  
  <pre><code>|-----------------------------------------|
  |&lt;h2&gt;My Gallery&lt;/h2&gt;                      |
  |Here is some collection of.....          |
  |&lt;gal_navigation&gt;                         |
  |                                         |
  |href Garchumuk    href Falta             |
  |  img src           img src              |
  |    of                 of                |
  |  Garchumuk           Falta              |
  |           and so on                     |
  |-----------------------------------------|
  </code></pre>
  
  <p>2) also, as shown, href should appear at the top of the img, not beside.</p>
  
  <p>It will be best, if this can be done browser independent way. (currently, the href appears at the top of img in firefox, but not in gnome's epiphany)</p>
  
  <p>the codes as far as I have managed:
  html:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"
  &gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;MySite&lt;/title&gt;
      &lt;link href="style.css" rel="stylesheet" type="text/css"&gt;
      &lt;style type="text/css" media="all"&gt;
  
  
      &lt;/style&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
      &lt;link rel="shortcut icon" type="image/x-icon" href="favicon.ico"&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id="container"&gt;
        &lt;div id="header"&gt;
      &lt;h1&gt;
        My Site
      &lt;/h1&gt;
        &lt;/div&gt;
        &lt;div id="navigation"&gt;
      &lt;ul&gt;
        &lt;li&gt;
        &lt;a href="aboutme.html"&gt;About Me&lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div id="gal_content"&gt;
      &lt;!--&lt;p&gt;--&gt;
      &lt;!--&lt;img src="images/gallery.jpg" alt="MyPic"&gt;--&gt;
      &lt;!--&lt;/p&gt;--&gt;
      &lt;h2&gt;
        My Gallery 
      &lt;/h2&gt;
      Here is some collection of pictures I have taken during several trips. These galleries are hosted in Picasa and Flickr web album.
      &lt;div id="galnavigation"&gt;
        &lt;table style="width:94px;margin:0.5em 0 0em 0;" border="0px"&gt;
          &lt;tbody&gt;
            &lt;tr&gt;
          &lt;td valign="top" align="center"&gt;
            &lt;a href="https://picasaweb.google.com/bnrj.rudra/Garchumuk?feat=embedwebsite" target="_blank"&gt; &lt;font style="color:#fff;font-size:.75em; text-shadow: 2px 2px 7px #111;  text-align:center; border:none;"&gt;&lt;i&gt;Garchumuk&lt;/i&gt;&lt;/font&gt;&lt;img src="https://lh4.googleusercontent.com/-7eOvmJb2ASM/R4D-sw0h7YE/AAAAAAAABqw/mR4XSrT2VNM/s160-c/Garchumuk.jpg" width="94" height="94" style="margin:1px 0 0 0px;" alt="garchumuk"&gt;&lt;/a&gt;
          &lt;/td&gt;
          &lt;td valign="top" align="center"&gt;
            &lt;a href="https://picasaweb.google.com/bnrj.rudra/FaltaTrip?feat=embedwebsite" target="_blank"&gt;&lt;font style="color:#fff; font-size:.75em;text-shadow: 2px 2px 7px #111;  text-align:center; border:none;"&gt;&lt;i&gt;Falta&lt;/i&gt;&lt;/font&gt;&lt;img src="https://lh5.googleusercontent.com/-3zQd1oQRUA0/TRgv6Z4AJ8E/AAAAAAAAD-s/Uq2lqhTw_Zo/s160-c/FaltaTrip.jpg" width="94" height="94" style="margin:1px 0 0 0px;" alt="falta"&gt;&lt;/a&gt;
          &lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
          &lt;td align="center" valign="top"&gt;
            &lt;a href="https://picasaweb.google.com/106471678921553351367/TakiTrip?authuser=0&amp;feat=embedwebsite" target="_blank"&gt;&lt;font style="color:#fff;font-size:.75em; text-shadow: 2px 2px 7px #111;  text-align:center; border:none;"&gt;&lt;i&gt;Taki Trip&lt;/i&gt;&lt;/font&gt;&lt;img src="https://lh3.googleusercontent.com/-EKTODai7XAs/SXtHhvE6v9E/AAAAAAAAEz8/PCCXLZKBLM4/s160-c/TakiTrip.jpg" width="94" height="94" style="margin:1px 0 0 4px;"&gt;&lt;/a&gt;
          &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
      &lt;/div&gt;
        &lt;/div&gt;
        &lt;div id="footermainPan"&gt;
        &lt;/div&gt;
      &lt;/div&gt; 
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre><code>body {
      font : 100% "Times New Roman", Times, serif;
      color : #0a8bf8;
      background : #184470;
      margin : 0;
        }
  h1 {
      position : absolute;
      height : 0;
      overflow : hidden;
        }
  .accessaid2, h1 {
      position : absolute;
      height : 0;
      overflow : hidden;
        }
  .accessaid, h1 {
      position : absolute;
      height : 0;
      overflow : hidden;
        }
  #header {
      background : #184470 url(images/banner2.png) no-repeat;
      height : 60px;
      margin : 0 auto;
      border-left : 214px solid #184470;
        }
  #navigation {
      position : absolute;
      top : 60px;
      left : 1%;
      width : 15%;
      color : #e4ecef;
      font-size : 110%;
        }
  #navigation ul {
      margin : 0 0 2em 0;
      padding : 0;
      list-style : none;
      color : #e4ecef;
        }
  #navigation ul a {
      color : white;
      text-decoration : none;
      display : block;
      background : #4674b2;
      padding : 0 0.5em;
      margin : 0 2em 1px 1em;
      color : #e4ecef;
      box-shadow :0 10px 10px #000;
        }
  #navigation a:visited {
      color : #e4ecef;
        }
  #navigation a:hover {
      background : #5096f0;
        }
  #content {
          background : #e4ecef;
          padding : 0.0em 2.5em;
          border-radius: 15px 15px 15px 15px;
          --moz-border-radius: 15px 15px 15px 15px;
          -webkit-border-radius: 15px 15px 15px 15px;
          width : 62%;
          float : right;
          margin-right : 17%;
          margin-left : 30%;
          border : 0px;
          background : #e0e9f8;
        }
  #gal_content {
          background : #e4ecef;
          padding : 0.0em 2.5em;
          border-radius: 15px 15px 15px 15px;
          --moz-border-radius: 15px 15px 15px 15px;
          -webkit-border-radius: 15px 15px 15px 15px;
          width : 62%;
          float : right;
          margin-right : 17%;
          margin-left : 30%;
          border : 0px;
          /*background : #e0e9f8;*/
        }
  #galnavigation {
      position : absolute;
      top : 0px;
      left : 23%;
      width : 17%;
      color : #000;
      font-size : 100%;
        }
  #galnavigation a:hover {
      background : #5096f0;
        }
  #galnavigation ul {
      margin : 100% 0 1em 0;
      padding : 0;
      list-style : none;
      color : #000;
        }
  #galnavigation ul a {
      color : white;
      text-decoration : none;
      display : block;
      background : #4674b2;
      padding : 0 0.5em;
      margin : 0 1em 1px 1em;
      color : #e4ecef;
      box-shadow : 0 10px 10px #000;
        }
  
  h2 {
          font-size : 200%;
          color : #184470;
        }
  h3 {
          font-size : 125%;
          color : #184470;
        }
  #container {
  /*position : relative;
  width : 100%;
  border : solid #036;
  border-width : 0 0px;
  margin : auto;*/
  }
  #content img {
          height : 200px;
          padding : 0;
          border : 0 solid #333;
          float : right;
          margin : .5em 0em 2em 2em;
        }
  #content img.icon {
      height : 120px;
          width :120px;
      padding : 0;
      border : 0 solid #333;
      float : right;
        }
  #content img.poems {
      height : 1200px;
      padding : 0;
      border : 0 solid #333;
      float : right;
        }
  #footermainPan {
      height : 10%;
      color : #2f5958;
      margin : 0 auto;
      clear : both;
      padding : 6px 0 0;
        }
  #playlist tbody tr.even td {
        background-color : #00cc66;
  }
  #playlist tbody tr.odd  td {
        background-color: #000;
      }
  #footerPan {
      width : 100%;
      position : relative;
      margin : 0 auto;
        }
  #footerPan ul {
      width :50%;
      height : 0px;
      position : relative;
      margin : 0 auto;
      color : #e0f6f0; 
      text-shadow : 2px 2px 7px #111;  
      text-align : left;
      border : none; 
      font-size : 1.5em; 
      font-weight : bold;
      list-style-type: none;
        }
  #footerPan li {
      float: left;
  }
  #footerPan ul li a {
      padding : 0 10px 0;
      color : #fff;
      background : #184470;
      text-decoration : none;
      font-size : 13px;
  }
  #footerPan ul li a:hover {
          text-decoration : underline;
  }
  #footerPan p.copyright {
      width : 250px;
      margin : 10px 0 0 2px;
      position : relative;
      left : 40%;
      color : #fff;
  }
  </code></pre>
  
  <p>I am not a regular html/css writer, and I have tried to make the code minimal.
  kindly help.</p>