Неправильное расположение div

Question

У меня есть div, в котором у меня есть изображение слева и текст справа. С меньшим текстом он отлично работает, но когда я добавляю все больше и больше текста, он просто разрушает весь макет!

Fiddle.

См скрипкой, что первые 2 строки просто работать нормально, но когда я добавить еще какой-нибудь текст (строка 3) расположение получает horibblified.

Как я могу решить эту проблему?

CSS:

.postWidget { 
    clear:both; 
    margin-bottom: 50px; 
} 
.postWidget img { 
    float: left; 
} 
.postWidget .job_title { 
    font-size: 20px; 
    margin-left: 30px; 
} 
.postWidget .description { 
    margin-left: 30px; 
} 
.postWidget .description span { 
    font-size: 15px; 
    margin-left: 30px; 
} 
.postWidget span a { 
    color: black; 
    text-decoration: none; 
} 
.postWidget .user_desc { 
    margin-left: 80px; 
    padding-top:5px; 
} 
.postWidget .user_desc .name { 
    font-weight: bold; 
} 
.postWidget .user_desc .name, .profession { 
    font-size: 12px; 
} 

Answer 1

Почему вы используете <span> теги для текста? Вы должны использовать <p> вместо этого, как это:

<div class="description"> 
    <p class="for"><b>For:</b> Lorizzle ipsizzle owned shizznit amizzle, consectetizzle adipiscing dope. Nullizzle check out this velizzle, i saw beyonces tizzles and my pizzle went crizzle volutpizzle, suscipit quis, yo pizzle, arcu. Pellentesque bow wow wow tortizzle. Sed erizzle. Shiznit izzle dolor dapibizzle turpizzle stuff fizzle. Maurizzle shizzlin dizzle gangster et turpizzle. Fizzle dawg fo. Check it out stuff you son of a bizzle sizzle. In gizzle habitasse platea dictumst. Fizzle dapibizzle. Break it down fizzle phat, pretizzle mofo, mattizzle sizzle, gangsta vitae, for sure. Hizzle suscipit. Integizzle bling bling velit pimpin'.</p> 
    <br/><p class="offer"><b>Offer:</b> Lorizzle ipsizzle owned shizznit amizzle, consectetizzle adipiscing dope. Nullizzle check out this velizzle, i saw beyonces tizzles and my pizzle went crizzle volutpizzle, suscipit quis, yo pizzle, arcu. Pellentesque bow wow wow tortizzle. Sed erizzle. Shiznit izzle dolor dapibizzle turpizzle stuff fizzle. Maurizzle shizzlin dizzle gangster et turpizzle. Fizzle dawg fo. Check it out stuff you son of a bizzle sizzle. In gizzle habitasse platea dictumst. Fizzle dapibizzle. Break it down fizzle phat, pretizzle mofo, mattizzle sizzle, gangsta vitae, for sure. Hizzle suscipit. Integizzle bling bling velit pimpin'.</p> 

Я также добавил некоторые CSS:

.description p { 
    margin:0 0 0 50px 
} 

Если вы используете <p> теги, Вы можете контролировать маржу пространство вместо использования <br /> везде! Кроме того, я думаю, что <b> теги могут быть устаревшими (они стары!) Используйте вместо этого теги <strong>!

<div class="description"> 
    <p class="for"><strong>For:</strong> Lorizzle ipsizzle owned shizznit amizzle, consectetizzle adipiscing dope. Nullizzle check out this velizzle, i saw beyonces tizzles and my pizzle went crizzle volutpizzle, suscipit quis, yo pizzle, arcu. Pellentesque bow wow wow tortizzle. Sed erizzle. Shiznit izzle dolor dapibizzle turpizzle stuff fizzle. Maurizzle shizzlin dizzle gangster et turpizzle. Fizzle dawg fo. Check it out stuff you son of a bizzle sizzle. In gizzle habitasse platea dictumst. Fizzle dapibizzle. Break it down fizzle phat, pretizzle mofo, mattizzle sizzle, gangsta vitae, for sure. Hizzle suscipit. Integizzle bling bling velit pimpin'.</p> 
    <br/><p class="offer"><strong>Offer:</strong> Lorizzle ipsizzle owned shizznit amizzle, consectetizzle adipiscing dope. Nullizzle check out this velizzle, i saw beyonces tizzles and my pizzle went crizzle volutpizzle, suscipit quis, yo pizzle, arcu. Pellentesque bow wow wow tortizzle. Sed erizzle. Shiznit izzle dolor dapibizzle turpizzle stuff fizzle. Maurizzle shizzlin dizzle gangster et turpizzle. Fizzle dawg fo. Check it out stuff you son of a bizzle sizzle. In gizzle habitasse platea dictumst. Fizzle dapibizzle. Break it down fizzle phat, pretizzle mofo, mattizzle sizzle, gangsta vitae, for sure. Hizzle suscipit. Integizzle bling bling velit pimpin'.</p> 

Обновлено fiddle

Answer 2

игра с макета :) http://jsfiddle.net/TjDZa/3/

.postWidget .description { 
    margin-left: 30px; 
    overflow:hidden; 
} 

Вы даже можете установить margin-right из img вместо margin-left из .description: http://jsfiddle.net/TjDZa/4/

.postWidget img { 
    float: left; 
    margin-right:30px; 
} 

.postWidget .description span { 
    font-size: 15px; 
}