How do i have side elements stretch to fill remaining screen space outside of the container?

Question

This is how it's supposed to look like: http://puu.sh/mLqjo/85df693983.png

The logic of this is to have the red element on the left stretch to fill the remaining space besides what is contained, as well as the grey on the right. I am using bootstrap so the elements in center occupy 1170px, or 1140px, if you exclude the paddings. What i tried was adding before and after children to the first and last elements and used absolute positioning trying to stretch them all the way to the margins of the screen. But no reliable method of calculating that length comes to mind, and i can't use overflow because the main element contains dropdowns. What do?

This is my HTML:

<div class="body-width-container">
  <div class="container">
    <div class="battery-finder battery-finder--inactive">
      <div class="battery-finder__label">
        Alege Bateria
      </div>

      <div class="battery-finder__icon">
        <i class="icon icon-battery"></i>
        <div class="battery-finder__icon::after"></div>
      </div>

      <div class="dropdown battery-finder__select battery-finder__select--fuel">
        <button class="dropdown-toggle" type="button" data-toggle="dropdown">
          Combustibil
                            <i class="icon icon-fuel"></i>
          <span class="battery-finder__select__arrows">
            <i class="fa fa-angle-up"></i>
            <i class="fa fa-angle-down"></i>
          </span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Test 1</a></li>
          <li><a href="#">Test 2</a></li>
          <li><a href="#">Test 3</a></li>
        </ul>
      </div>

      <div class="dropdown battery-finder__select battery-finder__select--manufacturer">
        <button class="dropdown-toggle" type="button" data-toggle="dropdown">
          Marca
                            <i class="icon icon-car-front"></i>
          <span class="battery-finder__select__arrows">
            <i class="fa fa-angle-up"></i>
            <i class="fa fa-angle-down"></i>
          </span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Test 1</a></li>
          <li><a href="#">Test 2</a></li>
          <li><a href="#">Test 3</a></li>
        </ul>
      </div>

      <div class="dropdown battery-finder__select battery-finder__select--model">
        <button class="dropdown-toggle" type="button" data-toggle="dropdown">
          Model
                            <i class="icon icon-car-side"></i>
          <span class="battery-finder__select__arrows">
            <i class="fa fa-angle-up"></i>
            <i class="fa fa-angle-down"></i>
          </span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Test 1</a></li>
          <li><a href="#">Test 2</a></li>
          <li><a href="#">Test 3</a></li>
        </ul>
      </div>

      <div class="dropdown battery-finder__select battery-finder__select--year">
        <button class="dropdown-toggle" type="button" data-toggle="dropdown">
          Anul
          <i class="icon icon-calendar"></i>
          <span class="battery-finder__select__arrows">
            <i class="fa fa-angle-up"></i>
            <i class="fa fa-angle-down"></i>
          </span>
        </button>
        <ul class="dropdown-menu">
          <li><a href="#">Test 1</a></li>
          <li><a href="#">Test 2</a></li>
          <li><a href="#">Test 3</a></li>
        </ul>
      </div>

      <button class="battery-finder__button">
        <i class="icon icon-magnifier"></i>
      </button>
    </div>
  </div>
</div>

and CSS:

.container .battery-finder__label:before{
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    left: -1000px;
    right: 100%;    
    background-color: inherit;
}

.container .battery-finder__button:before{
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    right: -1000px;
    left: 100%;    
    background-color: inherit;
}

.body-width-container {
    overflow: hidden;
}

score 0 · Answer 1 · answered Jan 27 '16 at 10:58

It would be possible to use a table:

<table style="width:100%; table-layout: fixed;">
  <tr>
    <td style="width: 50%; background-color: blue">&nbsp;</td>
    <td style="width: 1170px;">
      header
    </td>
    <td style="width: 50%; background-color: red">&nbsp;</td>
  </tr>

score 0 · Answer 2 · answered Jan 27 '16 at 11:14

You can do this by creating a fixed display style.

I've currently set .battery-finder__content to a max-width:1170px this will prevent it growing larger than 1170px and the other two items will fill the remainder. while the container wil also equal 100%;

To fix the width of the cent change max-width to width.

.body-width-container,
.container{
  width:100%
}
.battery-finder{
  width:100%;
  display:table;
  table-layout:fixed;
  height:50px;
 }
.battery-finder__label{
  background: #d00;
  display:table-cell;
}
.battery-finder__content{
  background: #888;
  display:table-cell;
  max-width:1170px;
}
.battery-finder__buttonWrap{
  background: #555;
  display:table-cell;
  border:none;
}

<div class="body-width-container">
  <div class="container">
    <div class="battery-finder battery-finder--inactive">
      <div class="battery-finder__label">
        Alege Bateria
      </div>

      <div class="battery-finder__content">
        STUFF GOES HERE
      </div>
      
      <div class="battery-finder__buttonWrap">
        <button class="battery-finder__button">
          <i class="icon icon-magnifier"></i>
        </button>
      </div>
    </div>
  </div>
</div>

score 0 · Answer 3 · edited May 23 '17 at 11:52

A pseudo-element was the right direction.

The basic techniques are discussed in this Stack Overflow Q & A

.body-width-container {
  overflow: hidden;
}
.container {
  width: 80%;
  margin: auto;
}
header {
  height: 75px;
  background: grey;
  position: relative;
}
header::before {
  content: '';
  position: absolute;
  width: 50vw;
  height: 100%;
  top: 0;
  right: 100%;
  background: red;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<div class="body-width-container">

  <div class="container">
    <header></header>
  </div>
</div>

How do i have side elements stretch to fill remaining screen space outside of the container?

3 Answers3