How to make text wrap before inner floating elements inside a container

Question

How to make text wrap before inner floating elements inside a container?

Here is what I'm trying to do...

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>

I would like the text inside the green div (in the middle) to wrap before the row wraps when I resize the screen.

I would prefer to to support IE9. Is it possible without flexbox?

Answer 1

display:table is compatible with IE8+ and can achieve what you're looking for:

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>