contractible div or cell tables - html

Question

Hi,
I have this code:
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
what I want to do is to have #center display always at a minimum size whereas the other 2 will collapse and even disappear if the window is resized or seen on a smaller resolution.
This is my CSS:
div {display:table-cell;}
#left, #right {width:auto;}
#center {width:1460px;}
this will look fine on a 1080p screen but not on smaller such as a 1024 width screen because a scroll bar will show. In those cases I want #center to cover the whole width and the other 2 divs to collapse completely to make room. How can this be achieved with only html and css?
Thank you.

Answer 1

Cain, I think this will be easier to show if I demo a smaller width for the center column. You can easily adjust the CSS to work at 1460px.
/*
1. Ensure center column has a fixed size
2. If there is horizontal space greater than 460px,
fill it equally with the left and right divisions
*/
.container {
display: flex;
}
.container > div {
height: 40px;
}
#left, #right {
flex: auto;
background: rgba(255, 0, 0, 0.5);
}
#center {
flex-basis: 460px;
background: black;
}
<div class="container">
<div id="left"></div>
<div id="center"></div>
<div id="right"></div>
</div>

Answer 2

You can use CSS flexbox like this:
#container {
display: flex;
}
#left, #right {
background-color: gray;
flex-grow: 1;
min-width: 0;
overflow: hidden;
}
#center {
background-color: yellow;
min-width: 500px;
}
<div id="container">
<div id="left">Left</div>
<div id="center">Center</div>
<div id="right">Right</div>
</div>
flex-grow:1 allows the left and right divs to grow and take up any empty space.
min-width:0 allows the left and right divs to disappear completely even though they have content inside.
overflow:hidden hides any content that is overflowing outside the left and right divs as the divs shrink.
min-width:500px makes sure the center div will never shrink below a width 500px.
The center div will never grow beyond 500px either, since the left and right divs will grow to take up the empty space.
Additionally, if you want the left and right divs to have a maximum width and allow the center div to grow, add the following as well:
flex-grow:1 to #center to allow it to grow.
max-width:50px to #left, #right to cap the width of the left and right divs.
Here is a working example.