Divs Not Lining Up Properly

[twilitegxa]

I'm having some trouble displaying my divs the way I want to. I'm not sure what codes I have wrong, or what I might need to add. Here is what I have for the three div tags I'm trying to get situated (right now I don't have anything set for the first div tag):

 

#txtHint {

}

#txtHint2 {
margin-left: 790px;
margin-top: -35px;
clear:none;
}

#txtHint3 {
margin-left: 550px;
margin-top: -1px;
clear: none;
}

 

And here is the HTML page where it displays:

 

<?php
$get_map = "select * from monsters1 group by map";
$get_map_res = mysql_query($get_map, $conn) or die(mysql_error());
echo "<select name=\"maps\" onchange=\"showMap(this.value)\">
<option selected=\"selected\">None Selected</option>";
while ($list_maps = mysql_fetch_array($get_map_res)) {
$map_id = $list_maps['id'];
$map = $list_maps['map'];
echo "<option value=\"$map\">$map</option>";
}
echo "</select>";
?>
<div id="txtHint2"></div>
<br />
<div id="txtHint"></div>
<div id="txtHint3"></div>
</form>
</div>

 

These div tags are being filled by a JS/PHP combination. I don't know if that makes a difference or not, but the PHP code that populates the three tags is below:

 

txtHint:

echo "<table border='0'>";

while($row = mysql_fetch_array($result))
  {
  echo "<tr>";
  echo "<td colspan=2><strong>" . $row['identity'] . "</strong></td></tr>";
  echo "<tr><td align=right><i>Health</i></td><td>" . $row['health'] . "</td></tr>";
  echo "<tr><td align=right><i>Energy</i></td><td>" . $row['energy'] . "</td></tr>";
  echo "<tr><td align=right><i>Attack</i></td><td>" . $row['acv1'] . "</td></tr>";
  echo "<tr><td align=right><i>Defense</i></td><td>" . $row['dcv1'] . "</td>";
  echo "</tr>";
  }
echo "</table>";

 

txtHint2:

echo "<table border='0'>";
echo "Select a location: <select name=\"locations\" onchange=\"showMonsters(this.value)\">
<option selected=selected>None Selected</option>";

while($row = mysql_fetch_array($result))
  {
  $location = $row['location'];
   echo "<option value=\"$location\">" . $row['location'] . "</option>";
  }
echo "</select>";

 

txtHint3:

echo "<table border='0'>";
echo "<tr><td>";

while($row = mysql_fetch_array($result))
  {
   echo "<strong>" . $row['name'] . "</strong></td>";
  }
echo "</tr></table>";

 

And this is what is happening to my divs when the div contents are displayed:

 

 

I need to keep everything from moving as the user selects options, and currently when the user selects the first option, it places it, but then when the user selects each additional option from the other select lists, the contents move lower and lower. I want the first and third div tags to line up with each other, but they aren't. Wat can I do?

[twilitegxa]

When I select the first option, this is how it looks:

 

 

Then the second option does this:

 

 

Then the third option does this:

 

 

So now I have the first and second div tags lining up after everything has been selected, but they are all messed up between selections. Can anyone help?

[Hybride]

Your margins are strange, why do you have the #txtHint3 (that's the last one) be closer to the page than the #txtHint2?

 

You can also try absolute positioning them.

[twilitegxa]

LOL I'm not sure. I was just trying different values until it looked right, but it still looks wrong anyway.  :-\

[twilitegxa]

Thanks, though. The absolute position seems to be doing the trick. I knew it was something simple. Thanks so much!!!