Determining the Width of a DIV Dynamically with CSS or LESS Depending on the Number of Siblings

Question

Determining the Width of a DIV Dynamically with CSS or LESS Depending on the Number of Siblings

One of my challenges involves a parent DIV with a width set to 100%.

Dynamically, this parent DIV is filled with numerous children DIVs.

I am trying to calculate and assign their widths using only the calc method in CSS or LESS. This is because the flex display option doesn't work for me due to working with SVG elements through D3.js.

The desired width formula for each child DIV is: width = (100% / n) - 10

How can I accomplish this task?

In addition, I also need the child DIVs to have alternating colors. I have already figured out how to do this.

Do you have any suggestions on how I can dynamically assign widths using CSS or LESS?

Here is the Jsfiddle link where you can see more details.

Below is the current code I have been working on:

.parent {
    width: 100%;
    height: 50%;
    background: pink;
    border: 1px solid red;
    min-width: 400px;
    min-height: 200px;
}

.child {
    min-height: 200px;
    min-width: 10px;
    border: 1px solid black;   
    display: inline-block;
}

.child:nth-child(even) {
    background: blue; 
    width: calc(100%/n -10);
}

.child:nth-child(odd) {
    background: green;  
    width: calc(100%/n -10);
}

javascript html css d3.js less

Answer 1

Answer №1

Flexbox is the ideal solution for distributing available space among child elements:

#parent {
  display: flex;
}
.child {
  flex-grow: 1;
  margin: 5px;
}

var parent = document.getElementById('parent');
var child = document.createElement('div');
child.className = 'child';
var numChildren = Math.round(Math.random() * 10);
for (var i = 0; i < numChildren; ++i) {
  parent.appendChild(child.cloneNode(false));
}

#parent {
  display: flex;
  min-width: 400px;
  min-height: 200px;
  background: pink;
  border: 1px solid red;
}
.child {
  min-height: 200px;
  min-width: 10px;
  border: 1px solid black;
  display: inline-block;
  flex-grow: 1;
  margin: 5px;
}
.child:nth-child(even) {
  background: blue; 
}
.child:nth-child(odd) {
  background: green;  
}

<div id="parent"></div>

You can also achieve a similar layout using CSS tables:

#parent {
  display: table;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
}
.child {
  display: table-cell;
}

var parent = document.getElementById('parent');
var child = document.createElement('div');
child.className = 'child';
var numCells = Math.round(Math.random() * 10);
for (var i = 0; i < numCells; ++i) {
  parent.appendChild(child.cloneNode(false));
}

#parent {
  display: table;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
  min-width: 400px;
  height: 200px;
  background: pink;
  border: 1px solid red;
}
.child {
  display: table-cell;
  height: 200px;
  width: 10px;
  border: 1px solid black;
}
.child:nth-child(even) {
  background: blue; 
}
.child:nth-child(odd) {
  background: green;  
}

<div id="parent"></div>

Answer 2

Flexbox is the ideal solution for distributing available space among child elements:

#parent {
  display: flex;
}
.child {
  flex-grow: 1;
  margin: 5px;
}

var parent = document.getElementById('parent');
var child = document.createElement('div');
child.className = 'child';
var numChildren = Math.round(Math.random() * 10);
for (var i = 0; i < numChildren; ++i) {
  parent.appendChild(child.cloneNode(false));
}

#parent {
  display: flex;
  min-width: 400px;
  min-height: 200px;
  background: pink;
  border: 1px solid red;
}
.child {
  min-height: 200px;
  min-width: 10px;
  border: 1px solid black;
  display: inline-block;
  flex-grow: 1;
  margin: 5px;
}
.child:nth-child(even) {
  background: blue; 
}
.child:nth-child(odd) {
  background: green;  
}

<div id="parent"></div>

You can also achieve a similar layout using CSS tables:

#parent {
  display: table;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
}
.child {
  display: table-cell;
}

var parent = document.getElementById('parent');
var child = document.createElement('div');
child.className = 'child';
var numCells = Math.round(Math.random() * 10);
for (var i = 0; i < numCells; ++i) {
  parent.appendChild(child.cloneNode(false));
}

#parent {
  display: table;
  table-layout: fixed;
  border-spacing: 10px;
  width: 100%;
  min-width: 400px;
  height: 200px;
  background: pink;
  border: 1px solid red;
}
.child {
  display: table-cell;
  height: 200px;
  width: 10px;
  border: 1px solid black;
}
.child:nth-child(even) {
  background: blue; 
}
.child:nth-child(odd) {
  background: green;  
}

<div id="parent"></div>

Answer 3

Answer №2

From my understanding, the current CSS method to determine the number of siblings is by using a combination of :nth-child and :nth-last-child, like so:

div:nth-child(1):nth-last-child(3),
div:nth-child(2):nth-last-child(2),
div:nth-child(3):nth-last-child(1) {
   width: 33.3%; /* if there are 3 divs, make them 1/3 of the container width */
}

However, this means you will have to create a selector for each element count you wish to support, with each subsequent selector being longer than the last.

Answer 4

From my understanding, the current CSS method to determine the number of siblings is by using a combination of :nth-child and :nth-last-child, like so:

div:nth-child(1):nth-last-child(3),
div:nth-child(2):nth-last-child(2),
div:nth-child(3):nth-last-child(1) {
   width: 33.3%; /* if there are 3 divs, make them 1/3 of the container width */
}

However, this means you will have to create a selector for each element count you wish to support, with each subsequent selector being longer than the last.

Determining the Width of a DIV Dynamically with CSS or LESS Depending on the Number of Siblings

Answer №1

Answer №2

Similar questions

utilizing props to create a navigational link

JavaScript: Working with Nested Callbacks and Retrieving MySQL Data

Updating the scope value in AngularJS with an asynchronous response is a crucial task for

In JavaScript with Node.js, how can one verify a file's size and only download the initial kilobyte of the file?

Tips for extracting and utilizing the values of multiple checked checkboxes in a jQuery datatable

Using the Jquery validation plugin for Internet Explorer 9 when the website first loads

Using AngularJS to implement modules in a single controller

Transition smoothly between sections using fullPage.js with clipping path effects

Leveraging React Native to position a view absolutely in the center of the screen without obstructing any other components

Create a class for the grandparent element

Using AJAX and JQuery to automatically refresh a webpage on a scheduled interval

Adding dynamic HTML to the body in AngularJS based on URL alterations

Loading Collada files with a progress callback function can help track the

Maximizing AngularJs performance on handheld devices

What could be causing the TailWind CSS Toggle to malfunction on my local server?

A guide to monitoring and managing errors in the react-admin dataProvider

Incorporating a YouTube video

How to eliminate a particular item within a string only in rows that include a different specific item using JavaScript

Place elements at the bottom of a webpage on any browser or device with just a single page

Ways to automatically close browser tab upon successful submission of a form