oh. oh dear. mucho layout problemo., it's this thing with margins! Options

[lghtrfld64]

I simply cannot understand margins. I'm currently trying to construct a layout from an image i made. I just can't get it right though!

This is the code i used:

<!-- begin code provided by createblog.com --><br /><IMG NAME="Image60" SRC="http://img98.imageshack.us/img98/5349/naturalbeauty3sd.gif" WIDTH="756" HEIGHT="756" BORDER="0" USEMAP="#Image6"><br /><br /><MAP NAME="Image6"><br /><AREA SHAPE="rect" COORDS="425,48,471,66" HREF="http://www.xanga.com"><br /><AREA SHAPE="rect" COORDS="338,7,453,26" HREF="http://www.xanga.com/lghtrfldlayouts"><br /><AREA SHAPE="rect" COORDS="481,49,537,65" HREF="http://www.xanga.com/private"><br /><AREA SHAPE="rect" COORDS="546,49,582,65" HREF="http://www.xanga.com/claf"><br /><AREA SHAPE="rect" COORDS="593,50,637,65" HREF="http://www.xanga.com/signin.aspx"><br /><AREA SHAPE="rect" COORDS="649,51,705,63" HREF="http://www.xanga.com/logout.aspx"><br /></MAP><br /><br /></BODY><br /></HTML></body></html><style<br />type="text/css">body {  background-image: url(); <br />background-position: top left;  background-repeat:<br />no-repeat;  background-color: #795c52; <br />scrollbar-arrow-color: #ffffff;  scrollbar-track-color:<br />#795c52;  scrollbar-shadow-color: #795c52; <br />scrollbar-face-color: #795c52;  scrollbar-highlight-color:<br />#795c52;  scrollbar-darkshadow-color: 795c52; <br />scrollbar-3dlight-color: 795c52;   }.leftmoduletitlebar,<br />.leftmoduleborder, .leftmoduleinterior, table.left, table.left TH,<br />table.left TD, table.navigation, table.footer {display: none;}.left,<br />.blogbody, table.footer, .standard, .leftmodulefontcolor, td, p, body,<br />{/* edits main text */  font:normal 9pt Arial;  line-height:<br />8pt;  color:#ffffff;  letter-spacing:0px; <br />text-align:left;  }div.blogheader, .caption {/* edits the dates<br />*/  font-family:Arial;  text-transform:lowercase; <br />font-size:9pt;  font-weight:bold;  color:#ffffff; <br />background-image: url();  border-bottom: 0px transparent; <br />text-align: left;  width:470px;  }table.footer TD {/* this<br />makes the footer at the bottom centered *//* leave it alone unless you<br />know what to do*/  text-align: left;  }input, select,<br />textarea, .textfield, .button {/* this edits the buttons, dropdowns,<br />etc. */ border: 0px solid #transparent; font-family:<br />Arial; font-size: 9pt; line-height: 8pt; color:<br />#ffffff; background-color:<br />#transparent; letter-spacing:0px; }a:link, .footernav.link,<br />a.footernav:link, a.footernav:active {/* edits all links */ <br />color:#ffffff;   font:normal 9pt Arial;  line-height:<br />8pt;  font-weight:normal;  text-decoration: none; <br />}a:visited, a.footernav:visited,  {/* edits the links that the<br />user has visited */  color:#ffffff;   font:normal 9pt<br />Arial;  font-weight:normal;  line-height: 8pt; <br />text-decoration: line-through;  }a:hover {/* edits when user mouseovers<br />the links */  color:#000000;  font:normal Arial; <br />font-weight:normal;  line-height: 8pt;  text-decoration:<br />line-through;  }input, select, textarea, .textfield, .button {/* this<br />edits the buttons, dropdowns, etc. */  border: 0px solid<br />#transparent;  font:normal 9pt arial;  line-height:<br />8pt;  background-color: transparent; <br />letter-spacing:0px;  color: #ffffff;  }table.blogbody {/*<br />this edits the other the place where the  blog is */ <br />background-color: #transparent;  border: 0px solid transparent;<br />  border-top: none;  width:352px; <br />}.#rblEprops{display:none;}#pnlEnabled table, #htmleditor,<br />#lblTimeZone, #pnlEprops, #rblEprops /* width of the comment page I<br />suggest miking it the same width as the blogbody*/{width:<br />352px;}table.search TD, table.search, table.announcements {/* border of<br />search bar (if you have it) */  background-image: url();  <br />border: 0px solid #transparent;  }table.search TD,<br />table.announcements TH {/* this should be left alone *//* unless you<br />know what to do */  border: 0px solid transparent; <br />}table.navigation, table.main, table.footer {/* the width of your blog<br />with modules */  width: 352px;  }table.navigation,<br />table.footer {  background-color:#transparent;  border: 0px<br />solid transparent;  display: none  }hr {/* horizontal divider<br />*/  border: 0px solid #75d321;  display:none; <br />}table.blogbody tr td {/* this edits the left margin of blog */ <br />width:350px;  padding: 0px;  }table.blogbody div.smalltext{/*<br />this edits the blog entry footer */  text-align: left;  }hr<br />{ display: none; } .table.footer,table.navigation {display:<br />none;}td.mainleft { display:none }table.left { display:none<br />}table.footer { display:none }.leftmoduletitlebar { display:none<br />}.leftmoduleborder { display:none }table.navigation { display:none<br />}</style><div align="center" class="blog"><!-- begin<br />code provided by createblog.com --><div style="overflow:<br />auto;width: 352px;height: 700px;margin-top: -295px;margin-right:<br />65px;"> <!-- end code provided by createblog.com<br />--><align="center"><style type="text/css"> text-align:<br />justify;color: #solid transparent;<br />  border-top: none;  width:470px; <br />}.#rblEprops{display:none;}#pnlEnabled table, #htmleditor,<br />#lblTimeZone, #pnlEprops, #rblEprops /* width of the comment page I<br /><br />suggest miking it the same width as the blogbody*/{width:<br />470px;}table.search TD, table.search, table.announcements {/* border of<br />search bar (if you have it) */  background-image: url();  <br />border: 0px solid #transparent;  }table.search TD,<br />table.announcements TH {/* this should be left alone *//* unless you<br />know what to do */  border: 0px solid transparent; <br />}table.navigation, table.main, table.footer {/* the width of your blog<br />with modules */  width: 470px;  }table.navigation,<br />table.footer {  background-color:#transparent;  border: 0px<br />solid transparent;  display: none  }hr {/* horizontal divider<br />*/  border: 0px solid #75d321;  display:none; <br />}table.blogbody tr td {/* this edits the left margin of blog */ <br />width:0px;  padding: 0px;  }table.blogbody div.smalltext{/*<br />this edits the blog entry footer */  text-align: left;  }hr<br />{ display: none; } .table.footer,table.navigation {display:<br />none;}td.mainleft { display:none }table.left { display:none<br />}table.footer { display:none }.leftmoduletitlebar { display:none<br />}.leftmoduleborder { display:none }table.navigation { display:none<br />}</style><div align="center" class="blog"><!-- begin<br />code provided by createblog.com --><div style="overflow:<br />auto;width: 510px;height: 278px;margin-top: -295px;margin-right:<br />-2px;"> <!-- end code provided by createblog.com<br />--><align="center"><style type="text/css"> text-align:<br />justify;color: #795c52}STRONG {COLOR:#795c52}--></style><br /><br /></body></html><divstyle="position:static;<br />margin-left:500px;margin-top:-656px;border: 0px solid #000000; width:<br />500px; height:700px;background: none; overflow: auto"><!-- end<br />code provided bycreateblog.com --><STYLE<br />type="text/css">  <br />BODY{scrollbar-3dlight-color:#795c52;         <br />scrollbar-arrow-color:#ffffff;         <br />scrollbar-base-color:#795c52;         <br />scrollbar-track-color:#795c52;         <br />scrollbar-darkshadow-color:#795c52;         <br />scrollbar-face-color:#795c52;         <br />scrollbar-highlight-color:#795c52;         <br />scrollbar-shadow-color:#795c52}   </STYLE><br /><!-- end code provided by createblog.com -->

to SEE my failed HTML work in action, go to the site:

www.xanga.com/nb64



Any help would render me supremely, hugely, and eternally grateful.