did i miss something?, i can't get the blog and modules into the right places.... Options

[xxrevengexx]

This is my first time making a layout. I've been following the tutorial but dunno why the things are not in the right places...

here's my code
(i have two versions... but they produce similar results )

CODE

<style type="text/css">
table.navigation, table.footer { display:none; }
</style>

<style type="text/css">
.#rblEprops{display:none;}
#pnlEnabled table, #htmleditor, #lblTimeZone,
/* width of the comment page */
{width:245px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer
{display: none;}
</style>

<img src="http://i22.photobucket.com/albums/b331/seabeachmoon/pattern.jpg">

<div style="overflow: auto; width: 110px; height: 130px; margin-top: 92px; margin-left: 26px;"><br>Name: Vivian<br>Age: 16<br></div>




<style type="text/css">
/* Name of Your Skin - By You*/
body
{background-color: #000000;
background-attachment: fixed;

scrollbar-face-color: #000000;
scrollbar-shadow-color: #FFCCFF;
scrollbar-highlight-color: #FFFF00;
scrollbar-3dlight-color: #9999FF;
scrollbar-darkshadow-color: #FFFFFF;
scrollbar-track-color: #CCFF00;
scrollbar-arrow-color: #CCFFFF;}

/* edits the date */
div.blogheader, .caption
{background-image: url(http://i22.photobucket.com/albums/b331/seabeachmoon/blogheader.

png);
background-repeat:no-repeat;
background-position:center;
font-family: Garamond;
text-transform:none;
font-size:15px;
line-height:40px;
font-weight:normal;
color:#99CCCC;
letter-spacing:2px;
text-align:left;
border:1px solid #FFFFFF;}

.blogbody b, .standard b, p b, strong {
/* edits bolded text in your entry */
font-weight: bold;
color: #FF3300;}

input, select, textarea, iframe.htmleditor, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
border: #px solid #COLOR CODE;
font:normal #px FONT FAMILY;
background-color: #COLOR CODE;
font-color:#COLOR CODE;}

table.footer TD {
/* this makes the footer at the bottom centered */
/* leave it alone unless you know what to do*/
text-align: center;}

table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-image: url();
background-color:none;
color: #CC6699;
font: bold 10pt Arial;
text-transform: none;
text-align:center;
border: #000000 0px solid;}

table.left {
/* this edits the menu module */
width:180px;
color:#FFFFFF;
background-color:#FFCC00;
BORDER: #FF99FF 3px solid;}

font,td,p,xmp
{color:#FFFFFF;
font-face: "Book Antiqua";
font-weight:normal;
font-size:10pt;
text-align:justify;}

table.blogbody tr td {
/* this edits the left margin of blog */
width:0px;
padding-left: 0px;}

table.blogbody {
/* this edits the other the place where the  blog is */
background-color:transparent;
family-font: Verdana;
BORDER: #FFFFFF 1px solid;
width:5px;} /* <-- The width for this should be around 5-15 pixels less then the width for your blog's div layer. */

<div style="overflow: auto; width: 340px; height: 340px; margin-top: 228px; margin-left: 197px;">

CODE

<img src="http://i22.photobucket.com/albums/b331/seabeachmoon/pattern.jpg">

<style type="text/css">
#pnlEnabled table, #htmleditor, #lblTimeZone, #pnlEprops, #rblEprops
/* width of the comment page */
{width:245px;}
.leftmoduletitlebar, .leftmoduleborder, .leftmoduleinterior, table.left, table.left TH, table.left TD, table.navigation, table.footer
{display: none;}
</style>

<script>
document.title ="The Hardest Part is Letting Go of Your Dreams"
</script>


<style type="text/css">
/*Light*/
/*by VP*/
body {
background-image:url();
background-repeat: repeat-y-x;
background-color: #000000;

scrollbar-face-color: #FFFFFF;
scrollbar-shadow-color: #FFCCFF;
scrollbar-highlight-color: #FFFF00;
scrollbar-3dlight-color: #9999FF;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #000000;
scrollbar-arrow-color: #CCCCCC;
}

#rblEprops, #pnlEnabled table, #pnlEprops table {
width: auto !important;
}

table.blogbody {
width:340px;
font-family: "Book Antiqua";
font-weight: none;
font-size: 12pt;
color: #FFFFFF;
text-align: justify;
padding: 0px;
margin-top: 2px;
}
div.smalltext{
width: 10px;
padding: 3px;
text-align: left;
}
.caption, .blogheader {
background-image:url(http://i22.photobucket.com/albums/b331/seabeachmoon/blogheader.png);
width: 380px;
padding: 3px;
font-family: Garamond;
font-size: 16pt;
text-align: left;
color: #99CCCC;
background-color: #COLOR;
text-transform: lowercaps;
margin-top: 10px;
}

P, B, I, TD, TH
{font-family: Garamond; color: #000000; font-size: 8pt; }
A:link, A:visited, A:active
{color:#6699FF; text-decoration:none; font-size:8pt;}
a:hover
{text-decoration: underline; color:#3366FF; font-size: 8pt; );}
b, strong, i, u, {
/* edit colors when bold italic underline */
font-family: Garamond;
font-size: 8pt;
color: #000000;
font-weight: bold;
text-transform: lowercaps;
</style>


<div style="
overflow: auto;
width: 990px;
height: 600px;
margin-top: 0px;
margin-left: 0px;">

thanks in advance!