Positioning a div between two divs - html

Question

I have two div elements as below:
<div class="div1">
This is div 1
</div>
<div class="div2">
This is div 2
</div>
With css as:
.div1 {
border-style: solid;
float: left;
width: 50%;
}
.div2 {
border-style: solid;
margin-left: 50%;
padding-left: 10px;
}
I want to add a third div which has nothing but a symbol through css.
<div class="div3">
</div>
with css:
.div3:after {
font-family: "FontAwesome";
content: "\f100";
color: blue;
font-size: 1.5em;
}
For this to nicely position between the two original div's, I changed div 2's css to:
.div2 {
border-style: solid;
margin-left: 51%;
padding-left: 6px;
}
This looks ok on FullScreen. However, when I minimize the browser window to a smaller size, div2 starts overlapping div3.
How can I nicely position div3 between div1 and div2 with even space at both sides of div2?
Here's the JSFiddle for my try: https://jsfiddle.net/d8nuw2m3/5/
Edit:
The flex solution provided below by Roy works fine. However, assume that the content of left and right div's grows a lot. In which case, scroll bar will appear. What if in this case, I want to keep the position of the middle div fixed as I scroll down ?
Adding position: fixed to div3 css doesn't work.
Here's the fiddle: https://jsfiddle.net/zL8sc2a9/

Answer 1

Solution #1
You could use flex for this.
Wrap all div's in a container with display: flex:
<div class="flex-container">
<div class="div1">
This is div 1
</div>
<div class="div3">
</div>
<div class="div2">
This is div 2
</div>
</div>
.flex-container {
display: flex;
}
Let the div1 and div2 grow equally (remove widths, margins, paddings):
.div1 {
border-style: solid;
flex-grow: 1;
}
.div2 {
border-style: solid;
flex-grow: 1;
}
Set a fixed width to the div3:
.div3 {
width: 18px;
}
That's it! Flex will do the trick for you: https://jsfiddle.net/1amuwfj5/
Solution #2
Use calc() to subtract div3 width from div1 and div2. General idea:
.div1 {
border-style: solid;
float: left;
width: calc(50% - 15px); /* we subtract 9x (half of div3) and 6px (border width) */
}
.div2 {
border-style: solid;
float: right;
width: calc(50% - 15px);
}
.div3 {
width: 18px;
}
Example: https://jsfiddle.net/1amuwfj5/1/

Answer 2

You can achieve this adding a div around it and using display: flex;. Floating elements is really the old way to do this.
Edit
I updated the snippet to have the .div3:after fixed with scrolling.
.page {
background-color: #eee;
height: 150vh;
}
.wrapper {
display: flex;
justify-content: space-between;
}
.div1 {
border-style: solid;
width: 50%;
margin-right: .5em;
}
.div2 {
border-style: solid;
width: 50%;
margin-left: 1.5em;
}
.div3:after {
position: fixed;
font-family: "FontAwesome";
content: "\f100";
color: blue;
font-size: 1.5em;
}
<div class="page">
<div class="wrapper">
<div class="div1">
This is div 1
</div>
<div class="div3">
</div>
<div class="div2">
This is div 2
</div>
</div>
</div>