How to set <div> s inline: text, img, text, text - html

Question

At first I have to that I read a lot of tutorials and still I don't know what am I doing wrong...
I would like to use 4 divs inline. In those divs I would like to put: text, image, text, text. And I would like the middle text to set automatically to the maximum width.
I wrote a simple code, just to show my problem:
<div>
<div style="float: right; width: 100px; background-color: red">right</div>
<div style="margin-right: 100px; background-color: blue">
<div style="width: 100px; background-color: green">left</div>
<div style="width: 100px; margin-left: 100px; background-color: pink">
<img src="../zdjecia_przedmiotow/1_small.jpg" />
</div>
<div style="margin-left: 200px; background-color: green">center</div>
</div>
</div>
And it looks like this:
I would like to do it using divs!
what am I missing?

Answer 1

First you need to float those divs inside so they align next to each other. Then you can use calc() to make the last container take the rest of the width;
FLOAT EXAMPLE
OR
You can use display: table on the parent and set the children to display: table-cell like so:
TABLE EXAMPLE
Also I restructured this a bit since there was some unnecessary elements/styles in there:
HTML
<div class="wrapper">
<div class="box box1">left</div>
<div class="box box2">
<img src="../zdjecia_przedmiotow/1_small.jpg" />
</div>
<div class="box box3">center</div>
<div class="box box4">right</div>
</div>
CSS
.wrapper{
overflow:hidden;
width:100%;
}
.box{
float: left;
}
.box1{
width: 100px;
background-color: green;
}
.box2{
width: 100px;
background-color: pink;
}
.box3{
background-color: green;
width:calc(100% - 300px);
}
.box4{
width:100px;
background-color: blue;
}
CLEANER FIDDLE

Answer 2

I simplified the HTML structure a bit and used floats. With the CSS left inline:
<div style="background-color:blue;">
<div style="width: 100px; background-color: green; float:left;">left</div>
<img src="../zdjecia_przedmiotow/1_small.jpg" style="width: 100px; background-color: pink; float:left;" />
<div style="background-color: green; width:calc(100% - 300px); float:left;">center</div>
<div style="width: 100px; background-color: red; float:right;">right</div>
</div>
After CSS is out:
.box{background-color:blue}
.left{width: 100px; background-color: green; float:left;}
.fill{background-color: pink; width:calc(100% - 300px);}
.right{width: 100px; background-color: red; float:right;}
<div class="box">
<div class="left">left</div>
<img class="left" src="../zdjecia_przedmiotow/1_small.jpg"/>
<div class="left fill">center</div>
<div style="right">right</div>
</div>
Fiddle