What are the CSS dimensions for fixed width points?

Question

What are the CSS dimensions for fixed width points?

<div class="container">
  <div class="content">
   Banana
  </div>
</div>

Suppose the 'content' element should always occupy a width of either 0, 25, 50, 75 or 100%, depending on its content. If the word 'Banana' takes up 20% of the 'container' width, then 'content' should be sized at 25%. If the word 'Mango' occupies 40% of the 'container' width, 'content' should have a size of 50%. The actual contents and widths are unknown, but they must align with these predefined values.

Can this behavior be achieved using only CSS? If not, what would be the simplest approach to accomplish this?

Edit: I intend to place any number of 'content' divs within the 'container'. Each one should adhere to one of these specified percentage widths. Additionally, the exact quantity of content divs is undetermined.

html css

Answer 1

Answer №1

It's unlikely that achieving this effect using only CSS is possible.

However, below is a JavaScript solution that can accomplish it; the comments accompanying the code explain its functionality:

let list = document.getElementsByClassName('content');
let containerWidth = document.getElementsByClassName('container')[0].offsetWidth;

Array.from(list).forEach(function(el) {
  // By default, divs are set to 100% width, rendering this ineffective. We must
  // alter the display style to collapse the element width to match its content boundary:
  el.style.display = "inline-block";
  // Determine the closest multiple of 25%, 50%, 75%, or 100% in which the content fits:
  let newWidth = Math.ceil(el.offsetWidth / containerWidth * 4) * 25;
  el.style.width = newWidth + "%"; 
  el.style.display = "block"; // Return to the original display setting. (Ideally, we would have stored the original style.display value for flexibility, but for now, let's overlook that)
});

.content {
  border: 1px solid;
}

<div class="container">
  <div class="content">
    Apple
  </div>
  <div class="content">
    Something longer than that
  </div>
  <div class="content">
    Something even longer than that, plus some more text
  </div>
  <div class="content">
    Something even longer than even longer than even longer than even longer than that plus some more text even on top of that
  </div>
</div>

The elements will be assigned percentage widths by this method, contributing to responsiveness when the window size changes. To update the percentages themselves, it would be necessary to rerun the above code preferably with a debounced window.resize event listener.

Answer 2

It's unlikely that achieving this effect using only CSS is possible.

However, below is a JavaScript solution that can accomplish it; the comments accompanying the code explain its functionality:

let list = document.getElementsByClassName('content');
let containerWidth = document.getElementsByClassName('container')[0].offsetWidth;

Array.from(list).forEach(function(el) {
  // By default, divs are set to 100% width, rendering this ineffective. We must
  // alter the display style to collapse the element width to match its content boundary:
  el.style.display = "inline-block";
  // Determine the closest multiple of 25%, 50%, 75%, or 100% in which the content fits:
  let newWidth = Math.ceil(el.offsetWidth / containerWidth * 4) * 25;
  el.style.width = newWidth + "%"; 
  el.style.display = "block"; // Return to the original display setting. (Ideally, we would have stored the original style.display value for flexibility, but for now, let's overlook that)
});

.content {
  border: 1px solid;
}

<div class="container">
  <div class="content">
    Apple
  </div>
  <div class="content">
    Something longer than that
  </div>
  <div class="content">
    Something even longer than that, plus some more text
  </div>
  <div class="content">
    Something even longer than even longer than even longer than even longer than that plus some more text even on top of that
  </div>
</div>

The elements will be assigned percentage widths by this method, contributing to responsiveness when the window size changes. To update the percentages themselves, it would be necessary to rerun the above code preferably with a debounced window.resize event listener.

Answer 3

Answer №2

Consider utilizing the power of flex boxes in your CSS design. By implementing

.container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

You can easily adjust the width dynamically. It appears that the specific requirement you have may not be very responsive or practical. Another option is to use width: auto for automatic sizing of the element.

Answer 4

Consider utilizing the power of flex boxes in your CSS design. By implementing

.container {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}

You can easily adjust the width dynamically. It appears that the specific requirement you have may not be very responsive or practical. Another option is to use width: auto for automatic sizing of the element.

Answer 5

Answer №3

Suppose we cannot find a solution using css.

In JavaScript,

var content = document.getElementById('content')
var container = document.getElementById('container')
var contentWidth = content.getBoundingClientRect().width
var containerWidth = container.getBoundingClientRect().width
var percent = contentWidth / containerWidth * 100
if (percent === 0) {
   content.style.width = '0%'
} else if (percent < 25) {
   content.style.width = '25%'
} else if (percent < 50) {
   content.style.width = '50%'
} else if (percent < 75) {
   content.style.width = '75%'
} else {
   content.style.width = '100%'
}

Answer 6

Suppose we cannot find a solution using css.

In JavaScript,

var content = document.getElementById('content')
var container = document.getElementById('container')
var contentWidth = content.getBoundingClientRect().width
var containerWidth = container.getBoundingClientRect().width
var percent = contentWidth / containerWidth * 100
if (percent === 0) {
   content.style.width = '0%'
} else if (percent < 25) {
   content.style.width = '25%'
} else if (percent < 50) {
   content.style.width = '50%'
} else if (percent < 75) {
   content.style.width = '75%'
} else {
   content.style.width = '100%'
}

Answer 7

Answer №4

This unique feature of "snapping" cannot be achieved using only CSS, however it is attainable through JavaScript by calculating the element's offsetWidth and adjusting its size accordingly.

// Locate your "content" element (you may require a more precise selector)
const content = document.querySelector('.content');
// Determine the percentage of the container that the element occupies when unstylized
const proportion = content.offsetWidth / content.parentNode.offsetWidth;
// Modify the width based on this proportion
if (proportion < .25) content.style.width = '25%';
else if (proportion < .5) content.style.width = '50%';
else if (proportion < .75) content.style.width = '75%';
else content.style.width = '100%';

Answer 8

This unique feature of "snapping" cannot be achieved using only CSS, however it is attainable through JavaScript by calculating the element's offsetWidth and adjusting its size accordingly.

// Locate your "content" element (you may require a more precise selector)
const content = document.querySelector('.content');
// Determine the percentage of the container that the element occupies when unstylized
const proportion = content.offsetWidth / content.parentNode.offsetWidth;
// Modify the width based on this proportion
if (proportion < .25) content.style.width = '25%';
else if (proportion < .5) content.style.width = '50%';
else if (proportion < .75) content.style.width = '75%';
else content.style.width = '100%';

What are the CSS dimensions for fixed width points?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Switch up the Background using .css and jCarousel

Methods for automating the clicking of a hyperlink within Bootstrap tabs programmatically

Display extensive text content in HTML for mobile devices

Tips for merging identical media queries into a single query using SASS

Presenting CSV data in a tabular format using Angular and TypeScript

The concept of transparency and the overlay effect: uncovering the formula

Having difficulties in loading the CSS file for my real-time chat application built with Express and Socket.io

Column Reordering in DataTable Causes Data to be Mapped Incorrectly

Exploring the asp.net MVC framework with the integration of HTML5 date input

Implementing a dynamic navigation bar that expands and collapses on mouse hover in a React application

Intelligent programming and innovative thinking to streamline template diversity

Is it secure to use a unique, static HTML/CSS website?

Struggling to implement a click event followed by DOM manipulation

Tips for displaying lower quality images while initially downloading higher quality versions

I am unable to modify the suffix located beneath the price of the product

What is the best way to add the SO-style <kbd> effect to my presentation made with HTML?

What method sits snugly between prepend() and append()?

Discover how to effortlessly unveil JSON data by clicking on data retrieved from an API

Steps to clear input after deselecting all checkboxes:

In Vue, applying CSS styles to D3's SVG elements may not work as expected when using the scoped attribute