Как предотвратить переполнение других элементов скрытыми?

Question

У меня есть родительский элемент с динамическим текстом, который должен быть ограничен определенной областью. У меня были пользователи, которые, когда писали предложения без пробелов (пример: ггггггггггггггггггггггггггггггггггггггггггггггггггггггггггггггупойкойвой ивентовой текстовой области это было нарушено).

#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;}

Я использовал overflow:hidden, как вы можете видеть выше в коде css, и это решило проблему, но создало новую проблему. У меня есть еще один элемент, который является абсолютно позиционированным изображением, которое завершает стиль моего речевого пузыря (вышеупомянутый элемент - речевой пузырь), и когда у меня есть вышеуказанный элемент на overflow:hidden, это заставляет это изображение исчезнуть. Я попытался z-index, и это не работает.

.ProfileCommentTail{background:url(images/speechBubbleTail.png) no-repeat top left; width:15px; height:10px; position:absolute; top:20px; left:-15px;}

Есть ли другой вариант, кроме overflow:hidden, или есть что-то, что я могу сделать, чтобы нейтрализовать нежелательную часть того, что делает overflow:hidden?

HTML структура:

 <div id='ProfileCommentBody' class='round_10px'>
        <div id='CommentNameProfile'>
            <div class='ProfileCommentTail'>&nbsp;</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>

Вот пример того, что он делает сейчас, и это неверно (отсутствует хвост речевого пузыря справа от поляроида и левее речевого пузыря): скрытое вызывает его исчезновение, но Исправление еще одной проблемы, с которой я столкнулся:

вот то, на что ДОЛЖНО быть похоже, обратите внимание на крошечный синий хвост речевого пузыря, связанный с речевым пузырем:

Answer 1

<div id="blah">
     <div class='ProfileCommentTail'>&nbsp;</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>

Это то, что я имел в виду под моим первоначальным комментарием. CSS, такие как:

#blah { position:relative; }

Опять же, из-за отсутствия ссылок на макет / дизайн / комп, трудно понять, что вы описываете. Я предлагаю размещать визуальные детали для визуальных проблем.