CODEWITHSUNDEEP
htmlcss
Bagzli
Bagzli

Reputation: 6579

Calculate width of middle div

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;
}

Upvotes: 0

Views: 242

Answers (1)

Johan Karlsson
Johan Karlsson

Reputation: 6476

Adding overflow: auto will make the div fill up the remaining space.

Demo: http://jsfiddle.net/aaL8gvhg/

Upvotes: 2

Related Questions