float content div

Question

У меня есть фиксированная ширина div, которую я хочу отобразить с правой стороны в контейнере. С левой стороны я хочу отобразить div так, чтобы его текст расширялся ниже правой части div после того, как правый div заканчивается. Пожалуйста, смотрите изображение ниже:

Вот что я в настоящее время пытается:

HTML:

<div class="wrapper"> 
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu ipsum augue. </div> 
    <div class="right">float right.</div> 
</div> 

CSS:

.wrapper{ 
    overflow: hidden; 
    border: 1px solid red; 
    width: 300px; 
} 

.left{ 
    float: left; 
    width: 200px; 
    background: brown; 
} 

.right{ 
    float: right; 
    width: 100px; 
    background: green; 
} 

JSFiddle: http://jsfiddle.net/qyrKY/

Answer 1

Изменить порядок ваших дивы на следующее:

<div class="wrapper"> 
    <div class="right">float right.</div> 
    <div class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu ipsum augue. Nulla ac turpis sem, vitae iaculis diam. Pellentesque nisl magna, gravida tempus laoreet in, bibendum eget dolor. Morbi convallis sem faucibus turpis viverra vestibulum. Nam at urna elit, eget elementum elit. Donec pretium placerat mauris ut blandit. Phasellus sit amet est ante, quis dignissim metus. Mauris id neque ligula, sit amet convallis nunc.</div> 
</div> 

И изменить левый класс CSS для:

.left { 
    background: brown; 
} 

jsFiddle example