Coding help!

[excussus]

I'm trying to make a cr chart over here, and ran into a few obvious snags. The top left one functions fine, but when I started playing around with moving the text box (top right) and with making the circle clickable to reveal the text (bottom right), it got all messed up. I tried playing with margins, but it didn't do anything. Any help would be super appreciated!

Here's the code:

<raw-text><table width="1000"><tr><td><div style="width: 300px; height: 300px; background: #7e8000 url(http://cdn.screenrant.com/wp-content/uploads/amazing-spider-man-2-andrew-garfield.jpg) center top; background-repeat: no-repeat; border-radius: 300px; padding: 10px;"><div style="width: 300px; height: 300px;border-radius:300px;border:10px dashed #007e80; padding: 20px;margin: -30px 0 0 -30px;"></div></div><div style="font-family: courier;letter-spacing:-3px;; font-size: 10pt; color: #662803; position: relative; margin-top: -70px; margin-left: 200px;"><b><div style="background: #C9C9C9; border-radius: 10px; height: 100px; padding: 10px; width: 250px; border: 1px solid #7A6761; opacity: .75;">You want to believe that there's one relationship in life that's beyond betrayal. A relationship that's beyond that kind of hurt. And there isn't.</div></b></div></td> <td style="width:1%"></td> <td><table width="1000"><tr><td><div style="width: 300px; height: 300px; background: #7e8000 url(http://cdn.screenrant.com/wp-content/uploads/amazing-spider-man-2-andrew-garfield.jpg) center top; background-repeat: no-repeat; border-radius: 300px; padding: 10px;"><div style="width: 300px; height: 300px; border-radius:300px;border:10px dashed #007e80; padding: 20px; position: relative; margin: -30px 0 0 -30px;"></div></div><div style="font-family: courier;letter-spacing:-3px;; font-size: 10pt; color: #662803; position: relative;margin: -130px 0 0 30px"><b><div style="background: #C9C9C9; border-radius: 10px; height: 50px; padding: 10px; width: 250px; border: 1px solid #7A6761; opacity: .75;">You want to believe that there's one relationship in life that's beyond betrayal. A relationship that's beyond that kind of hurt. And there isn't.</div></b></div></td></tr> <tr><td><div style="width: 350px; height: 350px; overflow: hidden;"><a name="first"></a><a href="#second" style="text-decoration:none;"><div style="width: 300px; height: 300px; background: #7e8000 url(https://38.media.tumblr.com/6d3845ca581d4b8ff2305743f2ca0ef5/tumblr_na2dj1LGjB1sc0ffqo2_500.gif) center; background-repeat: no-repeat; border-radius: 300px; padding: 10px;"><div style="width: 300px; height: 300px;border-radius: 300px;border: 10px dashed #007e80; padding: 20px; margin: -30px 0 0 -30px;"></div></div> <a name="second"></a><a href="#first" style="text-decoration: none;"><div style="width: 300px; height: 300px; background: #7e8000 url(https://38.media.tumblr.com/6d3845ca581d4b8ff2305743f2ca0ef5/tumblr_na2dj1LGjB1sc0ffqo2_500.gif) center; background-repeat: no-repeat; border-radius: 300px; padding: 10px;opacity: .4;"><div style="width: 300px; height: 250px;border-radius:300px;border:10px dashed #007e80; padding: 20px;margin: -30px 0 0 -30px;"></div></div><div style="width: 300px;font-family: courier;letter-spacing:-3px;; font-size: 12pt; color: #662803; position: relative; margin-top: -200px; margin-left: 30px;opacity: 0.8;align: float">It’s easy to feel hopeful on a beautiful day like today, but there will be dark days ahead of us too.</div></div></td> </tr></table>