blog, and box positioning Options

[sweetONyou080]

Okay, so I'm trying to make a skin, right.. all is going well until I try an add my little box area for the personal information on the side, everytime I try to align it to put it in it's place, my blog are starts moving. Here's the xanga, click here can you guys tell me what I should change?

Here's the code for it also...

<!-- begin code provided by createblog.com --><br /><!-- begin code provided by createblog.com --><br /><br /><div style="overflow: auto; width: 480px; height: 550px; margin-top: -150px; margin-left: 60px;"><br /><br /><!-- end code provided by createblog.com --><br /><br /><br /><!-- begin code provided by createblog.com --><br /><!-- begin code provided by createblog.com --><br /><div style="overflow: auto; width: 150px; height: 250px; margin-top: 300px; margin-left: -300px;"><b>About Me</b><br>Name: John Smith<br>Age: 20<br>Birthday: January 1<br>Hobbies: Farting<Br>Expertise: Computer Programming</div><br /><!-- end code provided by createblog.com --><br /><!-- end code provided by createblog.com --><br /><br /><br /><!-- begin code provided by createblog.com --><br /><br /><style type="text/css"><br />/* Soothe v.2(orange) - By Jada*/<br />body <br />{background-color: #transp;<br /><br />scrollbar-arrow-color: #000000;<br />scrollbar-track-color: #ff8000;<br />scrollbar-shadow-color: #ff8000;<br />scrollbar-face-color: #ff8000;<br />scrollbar-highlight-color: #ff8000;<br />scrollbar-darkshadow-color: #ff8000;<br />scrollbar-3dlight-color: #ff8000;}<br /><br />/* edits the date */<br />div.blogheader, .caption <br />{background-image: url();<br />background-repeat:no-repeat;<br />background-position:center;<br />font-family: verdana;<br />text-transform:none;<br />font-size:#3px;<br />line-height:#px;<br />font-weight:bold;<br />color:#ff8000;<br />letter-spacing:2px;<br />background-color:#transparent;<br />text-align:center;<br />border:bottom 1px dashed #ff8000;}<br /><br />.blogbody b, .standard b, p b, strong {<br />/* edits bolded text in your entry */<br />font-weight: bold;<br />color: #ff8000;}<br />text-align:left;<br /><br />input, select, textarea, iframe.htmleditor, .textfield, .button {<br />/* this edits the buttons, dropdowns, etc. */<br />border: #px solid #000000;<br />font:normal #2px verdana;<br />background-color: #transparent;<br />font-color:#ff8000;}<br /><br /> table.footer TD {<br />/* this makes the footer at the bottom centered */<br />/* leave it alone unless you know what to do*/<br />text-align: center;}<br /><br />table.left th {<br />/* on your menu module, this edits the title part of it */<br />/* like BLOGRINGS, POSTING CALENDAR, etc */<br />background-image: url();<br />background-color:none;<br />color: #ff8000;<br />font: bold #2pt verdana;<br />text-transform: none;<br />text-align:left;<br />border: #ff8000 #1px solid;}<br /> <br />table.left { <br />/* this edits the menu module */<br />width:180px;<br />color:ff8000;<br />background-color:#COLOR CODE;<br />BORDER: #COLOR CODE #px solid;}<br /><br />font,td,p,xmp<br />{color:#COLOR CODE;<br />font-face: verdana;<br />font-weight:normal;<br />font-size:#pt;<br />text-align:left;}<br /><br />table.blogbody tr td { <br />/* this edits the left margin of blog */ <br />width:0px; <br />padding-left: 0px;} <br /><br />table.blogbody {<br />/* this edits the other the place where the  blog is */<br />background-color:transparent;<br />family-font: verdana;<br />BORDER: #COLOR CODE #px solid;<br />width:###px;} /* <-- The width for this should be around 5-15 pixels less then the width for your blog's div layer. */ <br /><br />a:link<br />{line-height: #pt; <br />font-family: verdana;<br />font-weight:normal; <br />color:#COLOR CODE; <br />text-transform:none;<br />text-decoration:strikeout;<br />font-size:#pt; <br />cursor:crosshair;}<br /><br />a:active<br />{font-family: verdana; <br />color:#COLOR CODE; <br />text-transform:none;<br />font-size:#pt; <br />cursor:crosshair;}<br /><br />a:visited<br />{font-family: verdana; <br />color:#COLOR CODE; <br />text-transform:none;<br />text-decoration:strikeout;<br />font-size:#pt;<br />cursor: crosshair;}<br /><br />A:hover {font-family:verdana;<br />color:#COLOR CODE;<br />text-transform: uppercase; <br />cursor: crosshair; <br />font-weight:bold;<br />font-size:#pt}</style><br /><br /><!-- end code provided by createblog.com --><br /><br /><br /><!-- begin code provided by createblog.com --><br /><br /><style type="text/css"><br />table.navigation, table.footer { display:none; }<br /></style><br /><br /><!-- end code provided by createblog.com --><br /><br /><!-- begin code provided by createblog.com --><br /><script language="javascript"><br /><!--<br />var links = document.getElementsByTagName ('a');<br />for (var l = 0; l < links.length; l++) {<br />str = links[l].innerHTML;<br />if (str.match (/\d+:\d+ (am|pm)/i)) links[l]<br />else if (str.match (/eprops/i)) links[l].innerHTML = str.replace (/eprops/i, "cents");<br />else if (str.match (/eprop/i)) links[l].innerHTML = str.replace (/eprop/i, "cent");<br />else if (str.match (/comments/i)) links[l].innerHTML = str.replace (/comments/i, "dollars");<br />else if (str.match (/comment/i)) links[l].innerHTML = str.replace (/comment/i, "dollar");<br />else if (str.match (/subscribe!/i)) links[l].innerHTML = str.replace (/subscribe!/i, "add me");<br />else if (str.match (/sign out/i)) links[l].innerHTML = str.replace (/sign out/i, "log out");<br />}//--><br /></script><br /><!-- end code provided by createblog.com --><br /><br /><br /><!-- begin code provided by createblog.com --><br /><br /><style type="text/css"><br />.#rblEprops{display:none;}<br />#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops <br />/* width of the comment page */<br />{width:245px;}<br />.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer <br />{display: none;} <br /></style><br /><br /><!-- end code provided by createblog.com --><br /><!-- end code provided by createblog.com -->