Looking for a solution here. I am trying to utilize the CSS calc operation to carry out two calculations:
I aim to make my width equal to
(100% / 7) - 2
But whenever I attempt multiple operations in a CSS calc function, it doesn't work:
width: calc((100% / 7) - 2);
Any tips on executing multiple calc operations within one CSS statement?
It seems that you must designate either px or % for every number that is not part of a multiplication or division operation.
width: calc((100% / 7) - 2px);
Now I realize my mistake. Haha.
It has been pointed out by David that the calc function in CSS requires a unit such as px or % to function properly. You can use multiple calculations in one statement, like this:
width: calc((100% / 7) - 2px);
For those seeking clarification on this topic, it is important to note that calc can accept any unit, not just px and %. This includes em, rem, vh, vw, vmin, vmax, etc. Calc will resolve into a value that can be used normally, so just like you wouldn't set width: 100;, you should also ensure the result of calc is not unitless.
While using units on both sides when dividing or multiplying might seem unnecessary, at least one of the numbers must have a unit specified for the browser to understand how to interpret the result.
/* These examples are incorrect */
width: calc(75 + 25);
width: calc(4 * 20);
width: 100;
/* These are the correct format expected by the browser */
width: calc(75px + 25px);
width: calc(20px * 4);
width: 100px;
When I was struggling with headaches trying to accomplish that task, I discovered a helpful alternative. Instead of cramming everything into a single line of code, you can harness the power of pure CSS variables with var(). This not only solves the problem but also enhances readability! Take a look at this snippet where I applied this technique:
#wrapper .leftside .week .superior {
--wholeWidth: calc(157px * 3);
--remaining: calc(100% - var(--wholeWidth));
margin: 0 calc(var(--remaining) / 6);
}
I stumbled upon this gem while exploring the "Nested calc() with CSS Variables" section in the MDN documentation.
Issue at Hand: Currently, when the first row is selected as shown in Figure 2 below, all text colors are changed to black, instead of maintaining their original style displayed in Figure 1. Is there a way to retain the original colors when a row is selec ...
After reviewing the guidance provided in Material's documentation and this helpful response, I have been attempting to establish a default font-size for the html tag in my application. This adjustment is necessary because my app utilizes REM units, wh ...
Currently, I am working with an array (const second) that is being used in a select element to display numbers as dropdown options {option.target}. My question is: Is there a way to check within this map (that I'm using) if the 'target' from ...
Text formatted with <b></b> and <i></i> tags appears correctly on iPhone and Internet Explorer, but lacks formatting in Firefox or Chrome. I have included the .css files below. Additionally, I attempted to add i { font-style:italic ...
Let's say I have an image that needs to be shifted vertically, and I achieve it using the following code snippet: document.getElementById('ImgID1').style.verticalAlign = However, the value by which I need to shift the image is provided thr ...
I have an image of an arrow inside a div. The div is positioned fixed in the bottom right corner of an extremely wide page. Is there a way to utilize jQuery to scroll the window 600px to the right each time the arrow is clicked? Also, can I detect when th ...
I was having trouble using the nth-of-type(2n+1) selector to target odd and even rows in the scenario below. What I wanted was for the nth-of-type selector to apply different styles to the odd rows with the classes "row-data row-header" and "row-data row-c ...
I'm utilizing a v-bind:class binding on a component in order to toggle a css class based on the truthiness of a boolean within my Vue.js component. When I specify this in my template: <aside v-bind:class="{'--opened': sidebarVisible}" ...
Currently, I have a static image in the header of the page. I'm looking to have the image change to a different one when half the page has been scrolled. Do I need to utilize JavaScript for this functionality or is it achievable with CSS alone? bo ...
Is there a way to fix the issue of a white background appearing at the bottom of this div? .flexbox-item_one { display: inline-block; width: 200px; margin: 10px; background-color: white; box-shadow: 5px 5px 5px; overflow: hidden; } .flexb ...
I'm currently working on implementing a side navbar for my website, but I've run into an issue with spacing. In the demo linked in my fiddle, you'll notice that the <ul> element inside the receiptDropDown class doesn't push the k ...
I am attempting to incorporate a dynamic progress bar by utilizing Bootstrap's progressbar and creating a custom JavaScript file. The goal is to continuously adjust the width of the progress bar at regular intervals to give the appearance of a moving ...
https://www.example.com/code-sample overflow: scroll; overflow-y: scroll; When I type a lot of words, they become hidden so I need to use overflow-y=scroll. Despite trying both overflow: scroll; and overflow-y: scroll;, I have been unable to achieve the ...
I am encountering an issue with my bootstrap modal that includes a jquery datepicker. Specifically, the datepicker is styled as follows: .datepicker{ z-index:1000;} Interestingly, it functions perfectly on Google Chrome, displaying like this: However, ...
I am attempting to create a simple hover effect using two triangles. One triangle should start below the other, and upon hovering, it should appear above the first triangle. The problem I am encountering is that the surrounding boxes are obstructing the e ...
I'm working on a form that consists of multiple sections, each with varying numbers of input fields. I've noticed that when I apply display: flex to the parent div and set the input fields to 100% width, the widths are calculated differently depe ...
It's a common misconception that CSS can directly modify images, hence the quotation of "crop." My goal is to take rectangular images and apply CSS to give them a square appearance without altering the image itself. Essentially, I want to transform ...
Ensuring accessibility is a top priority for the project I'm currently working on. One aspect that is frequently discussed is how to mark up parts of an ordered list appropriately. I have created a jsfiddle demo showcasing referencing an ordered list ...
Struggling to implement a horizontal scrolling feature (via mousewheel) for both containers in the code below. I want this feature to be easily applied to any future container creations as well. <body> <style> #container { display: flex ...
While watching a video, I came across some concepts that were a bit difficult for me to grasp. The video mentions that scripts are 'serialized' and can block subsequent files from loading. According to this explanation, Script 1 would load first ...