Adjusting the dimensions of the central container

Question

Adjusting the dimensions of the central container

Does anyone have suggestions on how to resize the middle red container when the window is resized, considering the fixed-width black containers on the left and right? I am aware that this can be achieved using jQuery by calculating the window width and applying it to the middle <div>, but I was wondering if there is a solution that does not involve JavaScript. Link to Example

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

javascript css angularjs

Answer 1

Answer №1

Is Flexbox the solution?

See 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>

Answer 2

Is Flexbox the solution?

See 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>

Answer 3

Answer №2

One way to approach this is by following these steps: Assume that your black container has a width of 50px.

.black{
  width: 50px;
}

Next, determine the size of your red container which should be twice the width of the black container - so let's say it needs to span the entire window width. In that case, you can set its width using the following CSS:

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

I hope this explanation clarifies things for you.

Answer 4

One way to approach this is by following these steps: Assume that your black container has a width of 50px.

.black{
  width: 50px;
}

Next, determine the size of your red container which should be twice the width of the black container - so let's say it needs to span the entire window width. In that case, you can set its width using the following CSS:

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

I hope this explanation clarifies things for you.

Adjusting the dimensions of the central container

Answer №1

Answer №2

Similar questions

Are there alternative methods for anchoring an element in Vuetify aside from using the v-toolbar component?

Adding a unique key to every element within a JavaScript array

The function json.stringify fails to invoke the toJson method on every object nested within the main object

How can we assign various class names depending on the value of an object?

The closing tag for the "body" element was excluded even though OMITTAG NO was specified

The persistent space between the navbar and the index page remains despite the suggested fixes provided

Update the JavaScript and CSS files following an AJAX request with $.get

Issue with React Google Maps Api: Error occurs while trying to access undefined properties for reading 'emit'

"Unlocking the Power of jQuery: A Guide to Accessing XML Child

Implementing a click event listener on an iframe that has been dynamically generated within another iframe

What is the best method for applying a style specifically to controls located on the lower part of the

Tips for showcasing an item with the chosen value in a dropdown menu

How can I extract data from a swiffy animation?

My search field in Safari (desktop) doesn't respond to jQuery's .focus() function

Update the field 'payments._id' in MongoDB to a timestamp

Deciphering the occurrence of jQuery-Mobile page firing events: the mystery behind dialog pages appearing upon closure

Tips for creating sliding header content alongside the header

Creating visually appealing layouts with CSS floats and divs while ensuring responsiveness

Using httpRequest to handle binary data in JavaScript

Put emphasis on the input field - React component