CODEWITHSUNDEEP
javascriptcssangularjs
Iulian Miu
Iulian Miu

Reputation: 218

Resizing middle container

Any idea on how can I resize the middle red container on window resize, given the 2 black containers with fixed width on left and right? I know I can do this in jQuery calculating window width and apply to the middle <div> but I wonder if there's another js-less solution. Plnkr link here

<div id="wrapper">
  <div class="pull-left black"></div>
  <div class="middle red"></div>
  <div class="pull-right black"></div>
</div>

Upvotes: 0

Views: 63

Answers (2)

Tezekiel
Tezekiel

Reputation: 153

I would do it this way: Let's say your black container is 50px.

.black{
  width: 50px;
}

Then your red container is some size - 2*50px. I dont't know what size you want but for this example let's say you need it to be full window width. Then you would do:

.red{
  width: calc(100vw - 100px);
}

Hope this helps.

Upvotes: 0

Paulie_D
Paulie_D

Reputation: 115045

Flexbox?

JSFiddle Demo

#wrapper {
  max-width: 300px;
  height: 40px;
  display: flex;
}
.black {
  flex: 0 0 40px;
  background: #000;
}
.red {
  flex: 1;
  background: #f00;
}
<div id="wrapper">
  <div class="black"></div>
  <div class="red"></div>
  <div class="black"></div>
</div>

Upvotes: 1

Related Questions