make text wrap around a table? Options

[miyashu]

Click!

I want to submit this soon, but I'm having trouble with that table. Somehow it pushes the text all the way to the right so that only one letter fits in each row. I just want the text to wrap around the table, kind of like how you can get text to wrap around an image.

I'd appreciate any help on this. Thank you.

CODES

ABOUT ME:

<div style="position : absolute; margin-left:50%; left:40px; top:95px; overflow: hidden; z-index:1">
<img src="http://img524.imageshack.us/img524/1571/bearpk9.jpg" border="0"">
</div>

<style>
body {
scrollbar-arrow-color:98d9e1;
scrollbar-track-color:fff;
scrollbar-shadow-color:98d9e1;
scrollbar-face-color:fff;
scrollbar-highlight-color:98d9e1;
scrollbar-darkshadow-color:98d9e1;
scrollbar-3dlight-color:c8dee2;
overflow-x:hidden;
background-image:url('http://img155.imageshack.us/img155/4659/bearbgyr9.jpg');
background-repeat:repeat-all;
}

h1 {
font-family:century gothic, arial;
text-transform:none;
font-size:28px;
line-height:26px;
color:f6688e;
letter-spacing:2px;
margin-bottom:11px;
margin-right:31px;
padding-right:4px;
padding-top:6px;
background-color:transparent;
text-align: left;
font-weight:normal;
border:0px;
}

h1:first-letter {
color:ffaac6;
}

.content {
font:normal 11px tahoma;
line-height: 14px;
color: c45574;
background-color: fdf7f6;
padding: 10px 10px 10px 10px;
text-align:left;
width:520px;
height:auto;
overflow-x:hidden;
position : absolute;
z-index:2;
left: 0%;
top: 0%;
margin-left: 255px;
margin-top: 372px;
}

.footer {
color:c45574;
background-color:fdf7f6;
width:510px;
height:50px;
font:normal 10px tahoma;
}

.footer a:link, .footer a:visited, .footer a:active {
color:367bad;
font: normal 10px tahoma;
padding:2px;
text-decoration:none;
text-transform:none;
}

.footer a:hover {
color:344a68;
font: normal 10px tahoma;
background-color:transparent;
text-transform:none;
text-decoration:none;
}

.menu {
background-color:transparent;
padding: 5px 5px 5px 5px;
height:auto;
width:150px;
overflow-x:hidden;
float:left;
}
.menu a, .menu a:link, .menu a:active, .menu a:visited {
height:20px;
width:110px;
color: f55e87;
background-color:fbc2d1;
font: normal 11px tahoma;
letter-spacing:1px;
text-transform:lowercase;
text-decoration: none;
text-align:center;
display: block;
padding: 5px 5px 5px 5px;
}

.menu a:hover {
color: f55e87;
background-color:fde2e9;
text-align:center;
text-transform:lowercase;
display: block;
padding: 5px 5px 5px 5px;
}

b, strong {
color: 67abbe;
font:normal 11px century gothic;
line-height:13px;
text-transform:none;
letter-spacing:2px;
text-decoration:none;
}

i, em {
color: f095a3;
font:normal 11px georgia;
line-height:13px;
font-style:italic;
text-transform:none;
text-decoration:none;
}

s, strike {
color: 3a76b4;
}

a:link, a:active {
color:e74e96;
font:normal 11px tahoma;
text-transform: lowercase;
text-decoration:underline;
font-weight:normal;
border-bottom: none;
}
a:visited {
color:367bad;
font:normal 11px tahoma;
text-transform:lowercase;
text-decoration:none;
}
a:hover {
font:normal 11px tahoma;
color:344a68;
font-weight: normal;
border-bottom: none;
text-transform:lowercase;
text-decoration:none;}

blockquote {
color: f5608a;
background: fadfe3;
font:tahoma;
font-size: 10px;
padding: 6px;
}

.contacttable,.whitetext12,.nametext,.lightbluetext8,.orangetext15,.blacktext12,
btext,.redtext,.redbtext{display:none;height:0px;!important;visibility:hidden}
td td td td{border:0px;width:0px;text-align:left;}
table,td,tr{padding:0px;width:;background-color:transparent}
table table table{padding:1px;height:.01%;width:100%;}
table table,table table table table,table,tr,td{height:0px;!important;border:0px;!important}
a.text,table div font a,table div div,.navbar font,tr td font{visibility:hidden;display:none;height:0px;!important;}
table table table table,table table table table td.text, td.text td.text table{display:none;}
td.text table table{display:inline;visibility:visible;}
table td table tr td.text table{visibility:hidden;}
table td table tr td.text table table,table td table tr td.text table table td.text{visibility:visible;}
table.footer {display: none;}

body table td div form {display:none !important;}

div table a.navbar img {display:none;}
div table {visibility:hidden;}
div table div, div table table, div table.navigationBar, table div table, div table form {visibility:invisible}
div table {border-bottom:0px !important; }
div table.navigationBar {margin-bottom:-30px;}


div table div div select {position:absolute !important; top:-200px !important; left:0px !important; }
</style>

I'D LIKE TO MEET:

<div class="content">
<h1>about the layout</h1>
This layout features an image from <a href="URL">Wallcoo.com</a>. I'll write more here soon after I fix a few things. Which includes this table navigation thing. Rar.
<table width="120" align="left">
<tr>
<span class="menu">
<a href="URL">home</a>
<a href="URL">more pics</a>
<a href="URL">message me</a>
<a href="URL">leave a comment</a>
<a href="URL">view all comments</a>
</tr>
</span>
</table>Blah blah blah blah blah blah. blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah. blah blah blah blah blah blah blah blah blah.

<h1>how to use</h1>
Simply copy and paste the codes into About me/I'd like to meet. I would not suggest using this layout unless you have basic understanding of html. ALSO. Keep all credits or I will [insert creative threat here]. Seriously, though. I will eat you like a cheap plastic happy meal toy if you mess with the credits. I have incisors and I'm not afraid to use them!

<h1>contact</h1>
If you have any questions/concerns about this layout, the best way to contact me is either through pm at createblog OR comment at my <a href="http://www.msplinks.com/MDFodHRwOi8vd3d3LnhhbmdhLmNvbS9tb21va3VtYQ==" target="_blank">xanga</a>. Thanks for using this layout!

<h1>header</h1>
<b>Name:</b> Momo<br>
<b>Age:</b> eighteen<br>
<b>Ethnicity:</b> mixed <3<br>
<b>Interests:</b> illustration, creative writing, music, literature, graphic/web design, cake, shopping, cute things, wonder<br>
<b>Music:</b> D’espairsRay, Plastic Tree, Keane, Radiohead, Gazette, Teriyaki Boys, Tokio Hotel, Utada Hikaru, Kagrra, Coldplay, Super Junior, LM.C, Merry, ART-SCHOOL, Buck-Tick
<br><br>
Normal. <b>Bold.</b> <i>Italics.</i> <s>Strike-through.</s>
<blockquote>
<b>December 7</b> - Uploaded new layout<br>
<b>December 6</b> - Finished final project for computer tech. class<br>
<b>December 4</b> - Completed documented essay
</blockquote>

<span class="footer">
<img src="http://img99.imageshack.us/img99/3839/bearfootergq5.jpg" align="left"> Image © <a href="URL">Wallcoo.com</a>. Permanent credits go to <a href="URL">Momo</a> and <a href="URL">Createblog</a>.
<br>Don’t steal, it will give you hobbit feet.
</span>
</div>

[MissHygienic]

On the menu class, get rid of the padding.

CODE

.menu {
background-color:transparent;
padding: 5px 5px 5px 5px;
height:auto;
width:150px;
overflow-x:hidden;
float:left;
}

And in the content.

CODE

.content {
font:normal 11px tahoma;
line-height: 14px;
color: c45574;
background-color: fdf7f6;
padding: 10px 10px 10px 10px;
text-align:left;
width:520px;
height:auto;
overflow-x:hidden;
position : absolute;
z-index:2;
left: 0%;
top: 0%;
margin-left: 255px;
margin-top: 372px;
}

[miyashu]

I gave that a shot just now, and although it got rid of the problem I had with each row having only one letter, the table was still separate from the text.

But thank you for the suggestion.