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

Using a jQuery gallery can cause links to become unresponsive and unclickable

What is the process for incorporating a personalized SVG file into the material-ui Icon Component?

Using Knockout to bind an element to the selected value from a dropdown list

Ways to efficiently transfer multiple files from a server to a client using Express in NodeJS

Clear previously filtered items

Troubleshooting ECONNREFUSED in NextJS API: App successfully runs in both deploy and development mode, but encounters issues when next build is executed

The hamburger icon is not visible on smaller screens when using the Bootstrap 5 navbar

The excessive use of Selenium Webdriver for loops results in multiple browser windows being opened simultaneously, without allowing sufficient time for the

Capture and handle JavaScript errors within iframes specified with the srcDoc attribute

Stop image resizing on bootstrap Card

Using Facebook login with Node.js: A comprehensive guide

Waiting for an Element to Become Visible in Selenium-Webdriver Using Javascript

The formatter/render function in Angular Directive fails to refresh

Controlling the Quantity of Selected Checkboxes with JavaScript

Automatically install the development version of NW.js when running 'npm i'

Enhance the functionality of the directive form by incorporating additional methods

How do I disable scrolling while the animation is running in CSS?

The error message 'mainController' is not recognized as a function and is undefined, version 1.4

Integrate user interface functionality within the server component in NextJS

Style the CSS elements for a specific item