expandable div or cell panels

Question

expandable div or cell panels

Greetings,

I'm facing a challenge with my code:

<div id="left"></div>
<div id="center"></div>
<div id="right"></div>

My goal is to ensure that #center always displays at a minimum size, while the other two divs will collapse or even disappear if the window is resized or viewed on a smaller resolution.

Here's the CSS I currently have:

div {display:table-cell;}
#left, #right {width:auto;}
#center {width:1460px;}

This setup works well on a 1080p screen, but not on a smaller one like 1024 width where a scroll bar appears. In such cases, I want #center to cover the entire width and the other two divs to collapse completely to accommodate. How can I achieve this using only HTML and CSS?

Appreciate your assistance.

html css width

Answer 1

Answer №1

It would be more effective to demonstrate this concept by showcasing a narrower center column. To achieve this, you can easily adjust the CSS to operate at a width of 1460px.

/* 
  1. Ensure the center column maintains a fixed size
  2. If there is horizontal space exceeding 460px,
     evenly distribute it between 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

It would be more effective to demonstrate this concept by showcasing a narrower center column. To achieve this, you can easily adjust the CSS to operate at a width of 1460px.

/* 
  1. Ensure the center column maintains a fixed size
  2. If there is horizontal space exceeding 460px,
     evenly distribute it between 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 3

Answer №2

To implement a flexible layout using CSS, you can utilize the power of flexbox like shown below:

#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 will allow the left and right divs to expand and occupy any available space.
min-width:0 ensures that the left and right divs can completely disappear if needed, even with content inside.
overflow:hidden hides any overflowing content within the left and right divs as they shrink in size.
min-width:500px sets a minimum width of 500px for the center div, preventing it from shrinking below this value.
The center div cannot exceed 500px either, as the left and right divs will grow to fill any excess space.

If you also want to limit the maximum width of the left and right divs while allowing the center div to expand, include the following:

Add flex-grow:1 to #center to enable its growth.
Set max-width:50px on #left, #right to cap their widths.

For a live demonstration, check out this working example.

Answer 4

To implement a flexible layout using CSS, you can utilize the power of flexbox like shown below:

#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 will allow the left and right divs to expand and occupy any available space.
min-width:0 ensures that the left and right divs can completely disappear if needed, even with content inside.
overflow:hidden hides any overflowing content within the left and right divs as they shrink in size.
min-width:500px sets a minimum width of 500px for the center div, preventing it from shrinking below this value.
The center div cannot exceed 500px either, as the left and right divs will grow to fill any excess space.

If you also want to limit the maximum width of the left and right divs while allowing the center div to expand, include the following:

Add flex-grow:1 to #center to enable its growth.
Set max-width:50px on #left, #right to cap their widths.

For a live demonstration, check out this working example.

expandable div or cell panels

Answer №1

Answer №2

Similar questions

Accordion A and B both require the first category of accordion A to be opened first in order for the first category of accordion B to also be

The "label for" functionality does not activate the control

Complete the form by following a hyperlink located on a different webpage

Exploring the attributes of div elements with XPath

100% width is applied to the table cell within the div element

What is the strategy used by jQuery to select elements by class name?

Jquery form extension

Attempting to eliminate an HTML element using JavaScript

Position two div elements and an hr tag to create a step progress bar

Selecting an option from a dropdown menu and entering data into a text box

Iterating through the Bootstrap grid

The alignment of SVG is not in sync with the aspect ratio

The submit button remains unresponsive, yet upon removing its JavaScript code, it functions smoothly

Design a custom icon for uploading multiple files

Creating a CSS rollover effect for your logo on a WordPress website

Looking for a JavaScript or jQuery library that can automatically handle input direction?

Can you please explain the purpose of the white space in the HTML code?

Initiating a file download using HTML

Assertion error: 1 does not match the expected value of 6

Transforming CSS shorthand background properties into longhand representation