Проблема, связанная с форматированием текста

Question

Я пытаюсь поместить несколько сообщений в поточно-подобный макет. Чтобы увидеть результат, который у меня есть, перейдите по ссылке: http://jsfiddle.net/sunjay03/Aykqc/embedded/result/

Если вы отрегулируете ширину экрана, вы увидите, что текст в нижнем сообщении не соответствует правильному расположению. Кроме того, я не могу заставить дату всегда идти вправо от экрана.

Вот ссылка на полный jsfiddle: http://jsfiddle.net/sunjay03/Aykqc/

Вот некоторые образы того, что я хотел бы случиться:

Любая помощь?

Answer 1

Я возился с скрипкой и сделал это из него:

http://jsfiddle.net/S7drj/1/

HTML:

<div class="messages"> 
    <div class="message"> 
     <div class="message-image"> 
      <img src="http://www.sunjay.ca/images/logo_notext.gif" alt="profile_image"> 
     </div> 
     <div class="message-body"> 
      <div class="message-name"> 
       <span class="message-date">Nov. 15, 2010</span> 
       <h3>John Smith</h3> 
      </div> 
      <div class="message-text"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> 
      </div> 
     </div> 
    </div> 
    <div class="message"> 
     <div class="message-image"> 
      <img src="http://www.sunjay.ca/images/logo_notext.gif" alt="profile_image"> 
     </div> 
     <div class="message-body"> 
      <div class="message-name"> 
       <span class="message-date">Nov. 15, 2010</span> 
       <h3>Joe Smith</h3> 
      </div> 
      <div class="message-text"> 
       <p>Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</p> 
      </div> 
     </div> 
    </div> 
</div> 

CSS:

body 
{ 
    margin: 20px; 
} 

.message 
{ 
    padding: 2px; 
    margin: 2px; 
    clear: both; 
    width:100%; 
} 

.message .message-image 
{ 
    padding: 5px; 
    float:left; 
} 

.message .message-body 
{ 
} 

.message .message-body .message-name 
{ 
} 

.message .message-body .message-name h3 
{ 
} 

.message .message-body .message-text 
{ 
} 

.message .message-body .message-date 
{ 
    float: right; 
} 

Это, как вы хотите?

Answer 2

Как это jsFiddle?

HTML:

<div class="container"> 
    <div class="name">John Smith</div> 
    <div class="date">Nov. 15, 2010</div> 
    <div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div> 
</div> 
<div class="container"> 
    <div class="name">John Smith</div> 
    <div class="date">Nov. 15, 2010</div> 
    <div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div> 
</div> 
<div class="container"> 
    <div class="name">John Smith</div> 
    <div class="date">Nov. 15, 2010</div> 
    <div class="content">Aliquam commodo dui at mauris tempus eu commodo nunc commodo. Quisque accumsan semper sapien, quis tristique odio egestas ac.</div> 
</div> 

CSS:

.name { 
    float:left; 
} 
.date { 
    float:right; 
} 
.content { 
    clear:both; 
} 
.container { 
    overflow:auto; 
    padding-left:115px; 
    background: url(http://www.sunjay.ca/images/logo_notext.gif) no-repeat; 
    min-height: 110px; 
    margin-bottom: 20px; 
}