Calculate width of middle div - html

Question

I have 3 divs
I am using float:left to have the divs in the same line. my problem is that the div1 will have a random width. Div 3 will be always 25 pixels with margin left and right of 1. and then the middle div needs to fill up the remaining space.
What would be the best way to accomplish this and still be supported in all browsers?
Here is what I tried, but the problem is that the % width wont work because div1 will always change in width.
<div class="title-div gradient">
<div class="title-div-left">
<p>Service 1</p>
</div>
<div class="background-line"></div>
<div class="title-div-right">
<img src="ArrowUp.png" alt="▲">
</div>
</div>
</div>
.services-wrapper .expansion-wrap .title-div {
height: 3.5rem;
line-height: 3.5rem;
width: 95.6rem;
font-size: 1.7rem;
color: #FFF;
margin-left: 3.4rem;
background: #6f1505;
/* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZmMTUwNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzNDA4MDEiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #6f1505 0%, #340801 100%);
/* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #6f1505), color-stop(100%, #340801));
/* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #6f1505 0%, #340801 100%);
/* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #6f1505 0%, #340801 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #6f1505 0%, #340801 100%);
/* IE10+ */
background: linear-gradient(to bottom, #6f1505 0%, #340801 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6f1505', endColorstr='#340801',GradientType=0 );
.services-wrapper .expansion-wrap .title-div .title-div-left {
float: left;
}
.services-wrapper .expansion-wrap .title-div .title-div-left p {
margin: 0;
padding-left: 1.7rem;
padding-right: 1rem;
font-size: 2rem;
font-weight: bold;
display: inline;
}
.services-wrapper .expansion-wrap .title-div .background-line {
background-image: url("../images/Line.png");
background-repeat: no-repeat;
background-position: center;
background-position: no-repeat;
width: 50%;
height: 100%;
float: left;
}
.services-wrapper .expansion-wrap .title-div .title-div-right {
float: left;
height: 3.5rem !important;
padding-left: 1rem;
}
.services-wrapper .expansion-wrap .title-div .title-div-right img {
margin-top: 0.5rem;
}

Answer 1

Adding overflow: auto will make the div fill up the remaining space.
Demo: http://jsfiddle.net/aaL8gvhg/