What is the best way to evenly distribute dynamic divs in a vertical layout?

Question

What is the best way to evenly distribute dynamic divs in a vertical layout?

Essentially, my goal is to have the child divs evenly spread out within the parent div. If one of the child divs is removed, I want the remaining divs to resize and fill the space equally again.

For example:

 ---parent---------------
|  --------------------  |
| |              child | |
|  --------------------  |
|  --------------------  |
| |              child | |
|  --------------------  |
|  --------------------  |
| |              child | |
|  --------------------  |
 ------------------------

If a child div is removed, the layout should adjust as follows:

 ---parent---------------
|  --------------------  |
| |              child | |
| |                    | |
| |                    | |
|  --------------------  |
|  --------------------  |
| |              child | |
| |                    | |
| |                    | |
|  --------------------  |
 ------------------------

Currently, I am trying to achieve this using only pure HTML/CSS, but I haven't found a solution yet.

Other options I'm considering include:

Using JavaScript to calculate heights dynamically
Creating different classes for various scenarios (e.g., parent with 2, 3, or 4 child divs) and loading them accordingly with PHP

Does anyone have a better idea or alternative approach?

html css

Answer 1

Answer №1

Utilize css tables with table-layout: fixed - no need for javascript.

CHECK OUT THE FIDDLE HERE

To witness this in action, simply click on 'inspect element' on one of the li elements in the provided fiddle, right-click and select 'delete node' - you'll see exactly what you're looking for.

Markup

<ul>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
</ul>

CSS

ul
{
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #c2c2c2;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

li
{
    text-align: center;
    display: table-row;
    background: pink;
}
span
{
    display: table-cell;
    vertical-align: middle;
    border-top: 1px solid green;
}

Answer 2

Utilize css tables with table-layout: fixed - no need for javascript.

CHECK OUT THE FIDDLE HERE

To witness this in action, simply click on 'inspect element' on one of the li elements in the provided fiddle, right-click and select 'delete node' - you'll see exactly what you're looking for.

Markup

<ul>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
    <li><span>Item1</span></li>
</ul>

CSS

ul
{
    display: table;
    table-layout: fixed;
    width: 100%;
    border: 1px solid #c2c2c2;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

li
{
    text-align: center;
    display: table-row;
    background: pink;
}
span
{
    display: table-cell;
    vertical-align: middle;
    border-top: 1px solid green;
}

Answer 3

Answer №2

Using CSS3 for styling? Consider implementing the flexbox layout for a modern and efficient solution!

.container{
  height:200px;
  width:100%;
  display:flex;
  flex-direction:column;
}
.item{
  width:100%;
  height:100%;
}

Updated JSFiddle Link

Answer 4

Using CSS3 for styling? Consider implementing the flexbox layout for a modern and efficient solution!

.container{
  height:200px;
  width:100%;
  display:flex;
  flex-direction:column;
}
.item{
  width:100%;
  height:100%;
}

Updated JSFiddle Link

Answer 5

Answer №3

My approach involves utilizing the display:table and display:table-row CSS properties.

You can see my code in action on this jsFiddle link!

Answer 6

My approach involves utilizing the display:table and display:table-row CSS properties.

You can see my code in action on this jsFiddle link!

Answer 7

Answer №4

Mastering Flexbox

Imagine you have a group of elements residing inside the mainContainer. If this mainContainer is nested within another container (let's call it superParentContainer?), it's crucial to ensure that the mainContainer occupies the maximum space available.

Suppose the superParentContainer extends across the entire window. In that case, we need to define the CSS properties for the mainContainer as follows:

.mainContainer {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Refer to the top-notch flexbox guide online for different options under justify-content.

By setting both the height and width to 100%, the container will fill its parent (superParentContainer). We designate it as a flexbox with a column direction, aligning its children vertically.

To enhance the appearance, consider adding a margin of 1rem to the child elements.

.element {
  margin: 1rem;
}

Answer 8

Mastering Flexbox

Imagine you have a group of elements residing inside the mainContainer. If this mainContainer is nested within another container (let's call it superParentContainer?), it's crucial to ensure that the mainContainer occupies the maximum space available.

Suppose the superParentContainer extends across the entire window. In that case, we need to define the CSS properties for the mainContainer as follows:

.mainContainer {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

Refer to the top-notch flexbox guide online for different options under justify-content.

By setting both the height and width to 100%, the container will fill its parent (superParentContainer). We designate it as a flexbox with a column direction, aligning its children vertically.

To enhance the appearance, consider adding a margin of 1rem to the child elements.

.element {
  margin: 1rem;
}

What is the best way to evenly distribute dynamic divs in a vertical layout?

Answer №1

Markup

CSS

Answer №2

Answer №3

Answer №4

Mastering Flexbox

Similar questions

Illuminate a corresponding regular expression within a text input

Is there a way for me to determine the quality of a video and learn how to adjust it?

Browser comparison: Chrome and Firefox - peculiar ID name causing table width difference without CSS. Suspected AdBlocking interference

Embracing right-to-left (RTL) languages

I am unable to extract the text content from an element

What is the best way to bridge the distance between a shrunken iframe and the following element?

Background images are displayed correctly in Chrome, but are not appearing in Internet Explorer or Firefox

Retrieve data from the server as effortlessly as accessing an <img> tag

What steps should be followed to effectively incorporate Google Fonts into a Material UI custom theme for typography in a React/TypeScript project

Having trouble getting CSS headers to work smoothly with iPhone?

Utilizing arrow keys as a means of setting focus (HTML & JavaScript)

Only IE7 seems to be experiencing a z-index problem with CSS that is not present on any

Creating a CSS dropdown menu with absolute positioning and setting the left position to auto

Looking to preserve the "ALL" selection in a JavaScript-CSS filter?

Creating a web page with CSS that completely fills the screen and includes a lengthy list within the design

Arrangement of content in three columns with a flex direction set to column

Is there a way to effortlessly launch a new window with just a single click?

using javascript to retrieve php variables

Tips for retrieving multiple div elements by their id using the querySelectorAll method

A guide on extracting checkbox value from a database in PHP through the use of the explode function