Как сделать перенос текста перед внутренними плавающими элементами внутри контейнера

Question

Как сделать перенос текста перед внутренними плавающими элементами внутри контейнера?

Вот что я пытаюсь сделать ...

http://codepen.io/W3Max/pen/tKwqz

<div> 
 
    <div style="height:100px;width:300px;background-color:blue;float:left;"></div> 
 
    <div style="height:100px;float:left;word-wrap: break-word;background-color:green;">sdffds dgsdfgsdg sdfgsdfg sdfgsdfg ijhjkhkh lkjlk</div> 
 
    <div style="height:100px;width:300px;background-color:red;float:left;"></div> 
 
</div>

Я хотел бы текст внутри зеленой DIV (в середине), чтобы обернуть перед обтеканием строк при изменении размера экрана.

Я бы предпочел поддерживать IE9. Можно ли без flexbox?

Answer 1

display:table совместим с Internet Explorer 8 + и может достичь того, что вы ищете:

Forked pen.

.container { 
 
    display: table; 
 
    width: 100%; 
 
    /* if you don't want 100% width, set a max-width too */ 
 
    word-wrap: break-word; 
 
} 
 
.container > div { 
 
    display: table-cell; 
 
    height: 100px; 
 
} 
 

 
.container > div:first-child, .container > div:last-child { 
 
    width: 300px; 
 
}

<div class="container"> 
 
    <div style="background-color:blue;"></div> 
 
    <div style="background-color:green;">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div> 
 
    <div style="background-color:red;"></div> 
 
</div>

Answer 2

HTML

<div id="green">sdffds dgsdfgsdg sdfgsdfg sdfgsdfg ijhjkhkh lkjlk<div> 

CSS #green {padding:10px} (изменить размер) на зеленый div.