Bubble side bit positioning help

In the image in the attachment you can see the poup info box. where the arrow is pointing is what i want to sort out. It is currently displaceing the rest of the content. below is the code:

The CSS for the drop shadow part.

Code CSS:

.shadowbox2 {position: absolute;
			background: url(/images/shadow.png) repeat;
			top: 40px;
			right: 4%;
			}
 
 
		.shadowcontent, .shadowcontent2 {position: relative;
			padding: 5px; 
			top: -3px; /* these two define the shadow 'offset'*/
			left: -3px; /*...*/
			background: #ffffff;
			color: black;
			border: 1px solid #777777;
			border-left:			
			}

And the html:

Code HTML4Strict:

 
<div id="test'.$number.'" onmouseover="keepthediv(\'test'.$number.'\');" onmouseout="hidethediv(\'test'.$number.'\');" style="position:relative; top:-86px; left:500px; width:260px; display:none;">
<div class="shadowbox2" style="background-color:#FFFFFF; border:1px solid #000000;" >
 
<div class="shadowcontent">
 
<div style=" display:inline; position:relative; left:-15px;  top:13px;"><img src="/images/leftbit.png" /></div>
 
<div style="color:#6086b4; font-weight:bold;"> <img align="absmiddle" src="/images/icons/information.png" /> Anime Info Box</div>
This is the seconed test.
 
test<br />test<br />test<br />test<br />test<br />
<div style="background-color:#E9E8FF; width:100%">test</div>
</div>
</div></div>

In the html the code this is what is used to place the side bit on the info box.

Code HTML4Strict:

 
<div style=" display:inline; position:relative; left:-15px;  top:13px;"><img src="/images/leftbit.png" /></div>

Sorry if i havent made myself clear.