Comments Text Length Problem, How can I get rid of the space after each text comment? (screenshot) Options

[GirlFromSeven11]

Hi, I've been messing with this for a while, but can't seem to get the effect I really want. I'm beginning to wonder if it is even possible. Maybe you can help...



This is a screenshot of my page. Currently, between the text and the image, there is a bunch of empty white space, where I would like for the image to currently be (so I can keep my comment box fairly compact)



thus producing something that looks like this (which I photoshopped to show the effect I want)



However, some of my comments go over the edge (where I've drawn the red line) and take up that white space.



Essentially, I'd like to make all my comments automatically "word wrap" down, as I've photoshopped it to look like above, and then move the image over to take up the white space before.

Here is my code:

CODE

<style type="text/css">
table table,table table table table,table table{background-color:transparent;width:;border:0px;}
div,table,tr,td,th{background-color:transparent;text-align:left;border:0px;}
a.navbar,font,.whitetext12,.btext,.orangetext15,
.redbtext,.redtext,.blacktext12,.blacktext10,
.lightbluetext8,strong,.nametext,div b font font,
div font font u,table table table table, table.contacttable{display:none;}
div table form tr td,td.text table,a.text, table div font a,table div div,{visibility:hidden;display:none}
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;}
td.text table table {display:inline; visibility:visible;}
embed{position:absolute;top:0px;left:0px;display:block;width:0px; height:0;}
body div table td form option{display:none!important;}
body div table td form select{display:none!important;}
body div table td form input{display:none!important;}


.comt td, .comt table{width:0px!important; height:0px!important; background-color:transparent!important; border:0px!important; _padding:2px!important;} .comt, .comt td, .comt table, .comt td a img, .comt td td td a, .comt td b a, .comt td .redlink{visibility:visible;} .comt td td td b{top:0px; display:inline;} .comt td td td table, .comt .orangetext15, .redlink, .comt .btext, .frnd{display:none;} .comt td b, .blacktext10 {display:block;} .comt {z-index:7;}
.comt table, .comt b {position:relative; top:-32px; _top:-30px;}

JB{The Main: comment div;}
.comt {width:550px; height:160px; overflow-x: hidden; overflow-y: auto;
background-color:white; border:1px solid; border-color:black; position:absolute; top:200px; left:50%; margin-left:-100px; }
JB {Timestamp: width;}
.blacktext10 {width: 190px;}

JB{hides: online now images in comments & top 8}
.comt td td td div{display:none;}

JB{hides: Displaying XX of XX comments(View/Edit All Comments)}
.comt td b{display:none;}

JB{hides: the Add Comment link}
.comt td a{visibility:hidden;}

JB{resizes: images posted in comments}
.comt td td td img {width:300px; max-width:300px; _width:300px !important;}

JB{resizes: linked images including friends profile pic}
.comt td td td a img {width:70px; max-width:240px; _width:70px !important;}

JB{moves comment timestamp down}
.blacktext10 {position:relative; top:20px;}

JB{adds comment spacer line}
.blacktext10{border-bottom:1px solid; border-color:black;}

JB{add background image to timestamp}
.blacktext10{background-image:url(url_to_pic.gif);}

table table table table table {direction:rtl;}
table table table table table td {direction:ltr;}

JB{ COMMENT DATE }
.blacktext10 {font-family: arial; font-size: 10px; color:cccccc;}

JB{ COMMENT LINKS incl friend name }
.comt td td td a {font-family: arial; font-size: 11px; font-weight:bold; color: 8c8c8c; text-transform: uppercase; text-decoration: none;}

JB{ COMMENT TEXT }
.comt td td td, .comt td td td b {font-family: arial; font-size: 12px; color: 000000;}
</style>

Help would be greatly appreciated, thank you.