how do I prevent other elements from being affected by overflow hidden? - css

Question

I have a parent element that has dynamic text in it that needs to be confined into a certain area. I had users that where writing sentences without using spaces (example:yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy etc...) This was breaking the structure of my styled text area.
#ProfileCommentBody{ width:500px; font-family:Arial, Helvetica, sans-serif; font-size:12px; color:#333333; margin:15px 0px 0px 20px; float:left; background-color:#EAF7FB; padding:10px 10px 10px 10px; position:relative; overflow:hidden;}
I used overflow:hidden,as you can see above in the css code, and it solved the problem but created a new problem. I have another another element that is a image that is absolutely positioned that completes the style of my speech bubble ( the above element is the speech bubble) and when I have the above element on overflow:hidden it make that image disappear. I have tried z-index and that does not work.
.ProfileCommentTail{background:url(images/speechBubbleTail.png) no-repeat top left; width:15px; height:10px; position:absolute; top:20px; left:-15px;}
Is there a different option to use besides overflow:hidden or is there something I can do to counteract the unwanted part of what the overflow:hidden is doing?
html structure:
<div id='ProfileCommentBody' class='round_10px'>
<div id='CommentNameProfile'>
<div class='ProfileCommentTail'> </div>
<a href='http://www.blahblahblah.org/Profile.php?id=<?php echo $poster->id; ?>'>
<?php echo $poster->first_name. " ". $poster->last_name; ?> says...
</a>
</div>
</div>
Here is an example of an imgage of what it is doing now,which is wrong (missing speech bubble tail to the right of the polaroid, and the left of the speech bubble) overflow:hidden is causing this to disappear, but fixing another problem I was having:
(source: cysticlife.org)
here is what it is SUPPOSED to look like, notice the tiny blue speech bubble tail connected to the speech bubble:
(source: cysticlife.org)

Answer 1

<div id="blah">
<div class='ProfileCommentTail'> </div>
<div id='ProfileCommentBody' class='round_10px'>
<div id='CommentNameProfile'>
<a href='http://www.blahblahblah.org/Profile.php?id=<?php echo $poster->id; ?>'>
<?php echo $poster->first_name. " ". $poster->last_name; ?> says...
</a>
</div>
</div>
</div>
This is what I meant by my initial comment. CSS such as:
#blah { position:relative; }
Then again, because there is no layout/design/comp links it's hard to see what you are describing. I suggest posting visual details for visual problems.