CSS +大小不同的文本區域，以適應圖像

Question

http://jsfiddle.net/adamadam123/qv2yR/

內以上是我目前正在使用的代碼。下面是我想要實現的圖像。

它基本上是一個聊天框「IM」和我有一個藍色的&粉紅色的圖像，需要能夠獲得不同數量的文本圖像內坐。

我也嘗試使用圖像作爲CSS背景，但發現它沒有拉伸以適應文本。還嘗試了浮動和絕對定位。

任何幫助將不勝感激。

THX

<div class="chatMessengerBody"> 

     <div class="chatMessengerChatBubble chatMessengerChatBubbleBlueWrapper"> 
      <img src="images/chat-messenger-chat-bubble-blue.png" class="chatMessengerChatBubble chatMessengerChatBubbleBlue"/> 
      <p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins? 
      Great, thanks for asking. Never better to tell you the truth. So how about those dolphins? 
      Great, thanks for asking. Never better to tell you the truth. So how about those dolphins? 
      </p> 
     </div> 

     <div class="chatMessengerChatBubble chatMessengerChatBubblePinkWrapper"> 
      <img src="images/chat-messenger-chat-bubble-pink.png" class="chatMessengerChatBubble chatMessengerChatBubblePink"/> 
      <p class="chatMessengerChatBubbleContent">Great, thanks for asking. Never better to tell you the truth. So how about those dolphins?</p> 
     </div> 

    </div> 

Answer 1

http://jsfiddle.net/qv2yR/10/

CSS

.blue { 
    background: #EBF7FF; 
    border: 1px solid #D4F1FD; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    color :#6B95B0; 
    margin-bottom: 5px; 
    padding: 5px;  
    width: 200px; 
} 

.pink { 
    background: #FFF8F2; 
    border: 1px solid #FFEEE4; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    color :#D386A8; 
    margin-bottom: 5px; 
    padding: 5px;  
    width: 200px; 
} 

HTML

<div class="blue"> 
this is the blue one 
</div> 

<div class="pink"> 
    this is the pink one. 
</div> 

Answer 2

相反的形象，爲什麼不使用一些CSS & CSS3圓角：

.chatMessengerChatBubblePinkWrapper { 
    background:#fff8f2; 
    border:1px solid #ffeadb; 
    -webkit-border-radius: 5px; 
    border-radius:5px; 
}