Multiplication and Division with Unit-ed Values in CSS calc() Function

Can you perform multiplication or division with unit-based values using calc() (such as 100%, 5px, etc)?

For instance, I wanted to try something like this:

width: calc(100% * (.7 - 120px / 100%));

Expecting it to result in something similar to (if 100% is equal to 500px):

width: calc(500px * (.7 - 120px / 500px));
width: calc(500px * (.7 - .24));
width: calc(500px * .46);
width: calc(230px);

However, upon experimenting, it seems that having a unit-based value as the denominator for division is not allowed.

I have also noticed that multiplying two values together like 5px * 10px or 5px * 100% is not possible.

I understand that it may not be feasible in all cases, but in my specific situation, I need to determine what percentage 120px represents of the total width, which I would then use in the rest of my calculation.

If anyone can suggest an alternative approach or solution, I would greatly appreciate it. I have tried brainstorming on my own but haven't found a viable solution yet.

csscss-calc

Answer №1

When using CSS calc() for division, the right side must be a <number>, so unit-based values cannot be included in the division calculation.

It's important to remember that when multiplying with calc(), at least one of the arguments must be a numerical value.

If you need more information on CSS calculations, check out the resources provided by MDN.

To simplify your calculations, consider using a preprocessor like Sass. Their guides offer helpful tips and techniques, including information on operators.

Answer №2

For those of us prone to errors, it's important to remember that you can't simply use Sass variables in CSS's calc function. Instead, you need to utilize Sass's own calculation method.

$example: 10px;

.sample{
    width: $example * 2;
}

If using the calc function is a must:

$example: 10px;

.sample{
  width: calc(50% + #{$example * 2}); // this will result in calc(50% - 20px)
}

Answer №3

In the not-so-distant future, a new possibility will emerge as outlined in the official Specification

IMPORTANT: Previous versions of this guideline had limitations on multiplication and division operations to prevent complex intermediate outcomes (such as 1px * 1em, resulting in <length>²) and for detecting division-by-zero during parsing. This latest version eliminates those constraints.

Explore the detailed guidelines enabling the multiplication and division of different types

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for creating a "sticky" button in Angular that reveals a menu when clicked

Is there a way to incorporate a feature similar to the "Get help" button on this website: The button, located in the lower right corner, opens a sticky chat menu. I am interested in adding dynamic information to the button (such as the number of tasks a u ...

cssangular

Tips for keeping a div visible while hovering over a link using only CSS

Apologies for any language errors in advance. I will do my best to explain my issue accurately: In my CSS, I have created a hidden div that is displayed none by default. When I hover over a link in the navigation bar, I change the display to block, creati ...

htmlcssdrop-down-menuhoversubmenu

Tips for properly aligning an image within an HTML iframe

I've been working on positioning an image inside an iframe, but so far my research hasn't yielded the results I need. Here's what my code looks like: The HTML <div class="modal-body description"> <div class="modal ...

htmlcssiframeposition

presentation not transitioning smoothly as the next slide appears

Initially, my aim is to center the slideshow on the page but I am uncertain about how to achieve it. This is how my current webpage appears: https://i.sstatic.net/E6bzQ.png Furthermore, as shown in the image, the sliding effect of the blue slide is movi ...

cssreactjs

Steps for breaking down a given string into divisions that correspond to an A4 sheet

Within my content, there are various styles applied. For example: This is a <b>bolded</b> word. I am seeking a solution to divide this long string into smaller sections that would fit on an A4 page accurately. The goal is to maintain the integ ...

javascripthtmlcssionic-framework

What steps can be taken to ensure an animation does not continually reset to its original state when run infinitely?

I am looking to create an animation that continues infinitely without returning to its original state after completion, similar to a sun moving animation. Below is a sample project: .animator3{ -webkit-animation-name:j3; -webkit-animation-delay:0s; -web ...

htmlcssanimation

What causes background-color to create gaps of white space?

How can I remove the white spaces on the right and left side of a section when applying a background-color? I want the background-color to fill out the entire width of the section. Should I use extra padding to solve this issue? I have checked the CSS fo ...

htmlcss

Utilize dynamic inline styling to pass asset image paths as background images in Nuxt.js

I am in the process of developing a Nuxt.js application and I have a requirement to dynamically set the background image of an element using images from the assets folder. Here is what I have implemented: <template> <div> <div v ...

cssvue.jswebpackassetsnuxt.js

Tips for expanding an input field to span across two td elements

I am attempting to design a simple form. The issue I am encountering involves creating an input field that spans two td's in the second row of my table. Despite using the colspan="2" attribute within the td tag, the input field does not expand over tw ...

htmlcssinputhtml-table

Exploring the Impact of 2 HostBindings on Class Generation from Inputs in Angular 4

I'm struggling with the code in my component, which looks like this: @Component({ selector: "home", templateUrl: "./home.html" }) export class Home { constructor() {} @HostBinding("class") @Input() public type: string = "alert" @HostBindi ...

cssangulartypescript

My HTML Won't Recognize the CSS File

Despite trying various paths and browsers, I am unable to link my CSS file to my HTML file. When inspecting the page elements and checking under resources, the CSS file does not appear. Here is a snippet of my HTML: <html> <head> <meta ...

htmlcss

Ways to isolate and limit the application of CSS in React and Gatsby to specific pages instead of having it affect the global scope

At the moment, I'm working on integrating a keen-slider library(https://www.npmjs.com/package/keen-slider). To install it, we have to include import 'keen-slider/keen-slider.min.css'. This essentially adds the CSS globally to our project. Ho ...

javascriptcssreactjsgatsby

Unable to retrieve file on Linux system through PHP

<?php // Ensuring that an ID is provided include('include/function.php'); if(isset($_GET['id'])) { // Retrieving the ID $id = intval($_GET['id']); // Validating the ID if($id <= 0) { die('Th ...

javascriptphphtmlmysqlcss

Tips for aligning two divs vertically and horizontally next to each other

I'm struggling to center two divs both horizontally and vertically at the top of my page. I've tried various methods like "vertically align" & "margin: auto 0", but nothing seems to work. Can anyone help me figure out what I'm doing wron ...

htmlcss

create a word with only **one** bold letter in the word ionic-angularjs

Can someone please guide me on how to style only a specific letter within a word using angularJS? Specifically, I want to make the first letter bold while keeping the rest of the word in normal font. For instance, if I have an array of words like: var Wor ...

javascriptcssangularjshtml

conceal a division beneath a YouTube video frame upon clicking

I need to hide the 'div .blind' element when a YouTube video (inside 'div #player') is clicked. How can I achieve this? Here's an example: JS: ... var player; function onYouTubeIframeAPIReady() { player = new YT.Player('pl ...

javascripthtmlcssyoutube

Seeking a method to attach information from a div to a hyperlink

As a complete novice in the world of CSS websites, I find myself struggling to accomplish what seems like a simple task. I am working with an automatically generated CSS/JavaScript website where on the "individual" page, a person's name is listed with ...

javascriptjquerycss

I am having issues with Tailwind CSS overriding the responsive padding on my website

I'm currently working on implementing responsive padding for a component. Given that Tailwind CSS follows a mobile-first approach, I have set the mobile padding to p-3, while screens at "md" and larger widths should use p-5. However, it seems like the ...

cssreactjsnext.jsresponsive-designtailwind-css

Can a button be connected to both navigate to another webpage and trigger a modal to appear on it simultaneously?

Is there a way to connect a button to a modal on a different page so that when the button is clicked, it opens another page (in a new tab with target 0) with the modal already displayed? ...

jqueryhtmlcsstwitter-bootstrap

Is it possible to generate distance between 2 elements without utilizing padding or margin?

In my React Native project, I'm currently working with 2 inline buttons - the search and add buttons: https://i.stack.imgur.com/tKZrf.png I'm looking to add some spacing between these buttons without impacting their alignment with the left and ...

javascriptreactjscssreact-native