How do I get image to line up

How do I the image on the right to look balanced or at least even with text?

Remove the table shown below and put the image into the first <p>. Add a float right rule to your CSS. You will need to play with the margins to suit your needs. :slight_smile:

-------- remove this ----------
<table class=“image” align=“right”>
<tr>
<td><p><img src=“images/Poster.jpg” height=“550” width=“390” border=“2”></td>
</tr>
</table>

---------- modify this ---------------------
<p><img class=“rtF” src=“images/Poster.jpg” height=“550” width=“390” border=“2”>I have been involved in the treasure hunting/metal detecting pastime for over 35 years now, and have authored three books, written hundreds of articles, and
worked in the industry itself. As a result I receive lots of emails and letters from detectorists like you, asking me for advice, asking what I think of a particular … etc

------ add this to CSS -------------------
img .rtF { float:right; margin:0px 0px 20px 20px; }

Maybe I missed something…that makes it even worse.

I don’t know why it is not working for you. In the code below I have removed the table and moved the image as discussed previously. I have also moved your font styles into your style sheet. The image is now aligned with the top of the adjacent text and floated to the right as you wanted. You may want to substitute this code for that in your Home page.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Coinhunting, Dick Stout, Metal Detecting, FMDAC, Treasure Hunting" />
<title>Introduction</title>
<style type="text/css">
 a:hover { color: blue; text-decoration: none;  font-weight: normal;  }
 body{ font-family: Arial, Verdana; background-color: #F0EFD0; color:#000; margin:0px 100px; }      
 p:first-letter {font-size: large; color: #000; }  
 ul { list-style-type: none; text-align: center; line-height: 1.5em; }
#navbar { margin: 0; padding: 0; height: 1em;   }   
#navbar li { list-style: none; float: left;  }   
#navbar li a { padding: 3px 8px; background-color: #F0EFD0; color: #8A360F; text-decoration: none; font-weight:bold; font-size:16px;  }   
#navbar li ul  { display:none; width: 15em; font-size:14px; height:auto;   }   
#navbar li:hover ul { display:block; position: absolute; margin: -1px 0px; padding: 0px; }  
#navbar li:hover li { float: none; background-color: #F5DEB3;  }   
#navbar li:hover li a { background-color: #F5DEB3; color: #000;   }
#navbar li a:hover {  background-color: #8db3FF;  color:#F00;   }   
#txtL { font-weight:bold; color:#000; margin-bottom:100px; } 
#txtL p { margin-top:0px; margin-bottom:10px;  }  
#wrap { height:70px; } 
#welc{ margin:30px; }
.cntr{ text-align:center !important; font-size:26px; }
.firstL{ font-size: large; color: #000; }
.rtF { float:right; margin: 5px 0px 20px 20px; border:1px solid #000;  }
 </style>
</head>

<body>

<div id="wrap">
  <ul id="navbar">
    <!-- The strange spacing herein prevents an IE6 whitespace bug. -->
    <li><a href="index.html">Home</a></li>
    <li><a href="Introduction.html">Introduction</a></li>
    <li><a href="Aboutme.html">About Me</a></li>
    <li><a href="#">Articles</a>
    <ul>
      <li><a href="goodole.html">The Goodole days</a></li>
      <li><a href="TreasureTips.html">Treasure Tips</a></li>
      <li><a href="Oldfolks.html">Old Folks, Old Tales</a></li>
      <li><a href="Bill.html">Cousin Bill</a></li>
      <li><a href="BasicRules.html">Coin Hunting Rules</a></li>
      <li><a href="Winter.html">Winter Treasure Hunting</a></li>
      <li><a href="Productive.html">Finding Productive Sites</a></li>
      <li><a href="Dan.html">Detector Dan</a></li>
      <li><a href="Writing.html">Sharing Your Experiences</a></li>
      <li><a href="Future.html">What the Future Holds</a></li>
      <li><a href="Bolts.html">Nuts &amp; Bolts of a Metal Detector</a></li>
      <li><a href="cliff.html">Cliff Steffens Bio</a></li>
      <li><a href="Mark.html">Mark Schuessler Bio</a></li>
      <li><a href="Eleanor.html">Eleanor Hube Bio</a></li>
      <li><a href="Packrat.html">Larry Bateham Bio</a></li>
      <li><a href="UMOS.html">Unidentified Metal Objects</a></li>
    </ul>
    </li>
    <li><a href="Photos.html">Photos</a>
    <ul>
      <li><a href="Photos.html">Photos Set 1</a></li>
      <li><a href="Photos2.html">Photos Set 2</a></li>
      <li><a href="Photos3.html">Photos Set 3</a></li>
      <li><a href="Photos4.html">Photos Set 4</a></li>
      <li><a href="Photos5.html">Photos Set 5</a></li>
      <li><a href="Photos6.html">Photos Set 6</a></li>
      <li><a href="Photos7.html">Photos Set 7</a></li>
      <li><a href="Photos8.html">Photos Set 8</a></li>
      <li><a href="Photos9.html">Photos Set 9</a></li>
      <li><a href="Photos10.html">Photos Set 10</a></li>
      <li><a href="Photos11.html">Photos Set 11</a></li>
      <li><a href="Photos12.html">Photos Set 12</a></li>
      <li><a href="Photos13.html">Photos Set 13</a></li>
      <li><a href="Photos14.html">Photos Set 14</a></li>
      <li><a href="Photos15.html">Photos Set 15</a></li>
      <li><a href="Photos16.html">Photos Set 16</a></li>
      <li><a href="Photos17.html">Photos Set 17</a></li>
      <li><a href="Photos18.html">Photos Set 18</a></li>
    </ul>
    </li>
    <li><a href="Research.html">Research</a></li>
    <li><a href="equipment.html">Equipment</a></li>
    <li><a href="Coinhunting.html">Coinhunting</a></li>
    <li><a href="clubs.html">Clubs</a></li>
    <li><a href="Malamute.html">Malamute Saloon</a></li>
    <li><a href="Latest.html">LATEST NEWS</a></li>
    <li><a href="Recipes.html">Poor Gourmand</a></li>
    <li><a href="Link.html">Links</a></li>
    <li><a href="Books.html">Reading</a></li>
    <li><a href="Positive.html">Who We Are</a></li>
    <li><a href="http://users3.smartgb.com/g/g.php?a=s&i=g35-69865-a1">Guest Book</a></li>
  </ul>
</div>
<div id="txtL">
  <div id="welc" class="cntr">
    Welcome!!</div>
  <p>
  <img class="rtF" src="images/Poster.jpg" height="550" width="390" border="0" /><span class="firstL">I</span> 
  have been involved in the treasure hunting/metal detecting pastime for over 35 
  years now, and have authored three books, written hundreds of articles, and worked 
  in the industry itself. As a result I receive lots of emails and letters from 
  detectorists like you, asking me for advice, asking what I think of a particular 
  metal detector, inviting me to visit your town or city to hunt or to speak at 
  your club meeting. On the whole I try to respond positively, but more often than 
  not I cannot offer the information you seek, nor can I afford the travel costs 
  involved. Why? Because I too am just a hobbyist, and no more an expert than you.</p>
  <p>As of now I pretty much consider myself a part-time treasure hunter. I hope 
  that through this website I might be able to offer you a tip or two learned over 
  the years, but promise nothing earthshattering. Most of whatever success I've 
  had occurred because I entered into the pastime at an ideal time, and because 
  I spent an inordinate amount of time researching sites. Add to that a lot of in-the-field 
  trial and error, and a helluva lot of luck! </p>
  <p>You will not find a lot of technical babble here, and you may call a lot of 
  what I have to say, basic. That's fine. That's me. I still believe that research 
  is the most important part of this pastime!</p>
  <p>Next, getting along in years, this website offers me a place, and a reason 
  to look back and put things in perspective. While my metal detecting experience 
  is very much like yours, it took me on a somewhat different journey that changed 
  a great many things in my life. Some good, some not so good, but all worthy of 
  a look back.</p>
  <p>Lastly, I am new to the task of putting together a website, and working on 
  this one was not only fun, but a real learning experience. Please do let me know 
  if you have trouble viewing it so that I can make changes where needed.</p>
  <p>I hope you will always remember that, as detectorists, as amateur treasure 
  hunters, we are bound by a common thread, and it is this friendship, this comradery, 
  this sharing, that is so much more important than any treasure we can ever hope 
  to find.</p>
  <p>My goal is to keep this website updated regularly, and make it one you will 
  want to revisit from time to time. If you have any suggestions or comments please 
  email me at: <a href="mailto:Disc440@tx.rr.com">Disc440@tx.rr.com</a> If you have 
  any complaints email me at <a href="mailto:@$)!*@HaHa.com">UpYours!@HaHa.com</a></p>
  <div class="cntr">
    Dick Stout</div>
</div>
<script type="text/javascript">
  var _gaq = _gaq || [];  _gaq.push(['_setAccount', 'UA-19821548-1']);  _gaq.push(['_trackPageview']);  (function(){
  var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;        
  ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
  
</script>
</body>

</html>


Please excuse me for butting in to say that I have been playing with Github’s “https://gist.github.com/” and “http://bl.ocks.org/

Gists can create simple index.html pages without having a Github account.

Step 1: Open following page for editing -
https://gist.github.com/

Step 2: add “Gist description” and “name the file…” to index.html

Step 3: copy and paste the html content into the textbox

Step 4: save either as “Create Public Gist” or “Create Anonymous Gist”

Step 5: Copy the generated URL

To view: generated page: replace [B]https://gist.github.com/[/B] with [B]http://bl.ocks.org/[/B]

Save modified URL and view contents:
http://bl.ocks.org/anonymous/eb253ceaff2a9c467b15

To view: generated page and source code insert “raw/”:
http://bl.ocks.org/anonymous/raw/eb253ceaff2a9c467b15/

here is my suggestion

<div id=“left”>put all stuff on the left in this container</div>
<img src=“” title=“” alt=“” id=“rightimg”/>

css looks like this

div#left {width:40%; height:200px; float:left;}
img#rightimg {width:39%; height:200px; float:right}

this is just an example so try it

you might need to remove some of the content in your menu and put it in a sidebar as it seems they are overlapping
you can also try to fix this by reducing the size of the text in the menu or the padding and margins between the menu items