How to set 3 divs side by side SO TA so that the middle div can stretch with shape change

Question

I know this may look like an old question, but I am trying to put 3 divs side by side, but the middle div should stretch with changing shape. I found it here and used my code, but it does not work. The right div is still clicked below, instead of being next to it.

Here is an example of what I have, but as I said, the right div gets down below the div instead of being next to it. Can someone share their well-earned knowledge!

Answer 1

HTML:

<div class="mainDiv"> <div class="left">Left</div> <div class="center">Center</div> <div class="right">Right</div> </div> 

CSS

 .mainDiv{ position: relative;} .left{ position: absolute; left: 0; top: 0; width: 100px; } .right{ position: absolute; right: 0; top: 0; width: 100px; } .center { margin: 0 100px; } 

Jsfiddle

Updated Fiddle to meet your new requirement :)

Answer 2

 <div style="border:1px solid red; height:140px;"> <div style="width:100px; float:left; border:1px solid blue;"> left </div> <div style="width:100px; float:right; border:1px solid blue; "> right </div> <div style="border:5px solid green; overflow:hidden;"> middle </div> 

check this example