How to do text wrapping before internal floating elements inside a container

Question

How to make text wrapping before internal floating elements inside a container?

Here is what I am 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 line wrapper when resizing the screen.

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

Answer 1

display:table compatible with IE8 + and can achieve what you are looking for:

Fork 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} (resize) on the green div.