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.
How can I ensure that carousel pictures are displayed clearly within the box without overflowing? The code I tried resulted in the pictures overflowing from the box and not being visible clearly. How can I resolve this issue? .container { width: 1490px; ...
I've been searching for a solution without success. I'm looking to customize the image for my Pinterest (Pin It) button and pin a specific image by URL, not just the current page. Here is the custom link I created: <a href="http://pinterest. ...
I am facing an issue with the fonts on my website. They work perfectly in all browsers when using http, but as soon as I switch to https, the fonts stop working in IE8 and lower versions. However, they do display correctly in ie9. When trying to access th ...
In my current project, I am dealing with a large number of sections. Each section contains one or two rows with columns ranging from 2 to 15, all of equal width. The cells of the same color are placed in the same column, and the layout looks like this: To ...
I am using AdminLTE3 as my admin panel in Laravel, but I am facing an issue with the nav-item links not activating when clicked. Even though I have all the required assets for AdminLTE3 and used the starter.html file, the navigation items are not working p ...
My task is to design a 3-grid layout that resembles the following structure: ------------------------------------- | Image | The name of logo | > | ------------------------------------- I attempted this using the code below: <div class=" ...
I have multiple sibling divs that are styled with position: fixed; display: table; top: 0; left: 0; width: 100%; height: 100%;. These divs act as message boxes and are created by a third-party ASP.NET control, preventing me from altering their order in t ...
Within my Angular 8 application, a fixed navigation bar is positioned at the top of the screen. Upon hovering over a dropdown nav link, a menu will appear for the user to explore. However, when a user clicks on one of these menu links, Angular Routing is ...
In search of a straightforward and effective method for focusable elements to display an outline only when the tab key is pressed, without showing it when using a mouse in React applications. (looking for something similar to :focus-visible that function ...
Can someone help me achieve a similar image scrolling effect like the one on the left side of this website: I am looking to change the image inside a div as I scroll and ensure that the page doesn't scroll further until all the images have been scrol ...
Whenever I define a css class and attempt to access its member from JavaScript, the result always ends up being undefined. Where could my mistake possibly lie? function myFunction() { var x = document.getElementById("myId").style.myMember; document. ...
Looking to customize the pagination layout, I have managed to style most elements except for replacing the first and last icons with text. Here is the current setup: https://i.stack.imgur.com/ZneZs.png I want it to look something like this: https://i.st ...
I want to create a sticky button that remains fixed on the page regardless of its content and styles. The button should always be displayed on top of other elements, without relying on specific z-index values or pre-existing structures. This solution must ...
I'm having trouble getting the right image to show on my website. The left side of the image is fine, but I can't figure out how to make the right one appear. As a HTML/CSS beginner, I'm still learning the basics. For more information, vis ...
I have successfully implemented a Ticketing System using PHP and MySQL database. The view tickets page displays each ticket from the database along with its priority level, which can be Low, Normal or High. Currently, the priority value pulled from the d ...
Currently, I am using the latest version of the owl carousel and encountering a small issue. The problem lies in the fact that I have 3 images with varying sizes. The main div, labeled as "mydiv," is required to have a width of 614px. However, upon closer ...
Currently, I'm utilizing the functional component of React.js. Within this component, I have an array of objects that contain specific styles. const data = [ { id: 1, color: '#000' }, { ...
I am new to Onsen UI and AngularJS, and I have a simple question about data binding. When I use the variable $scope.name with ng-model in an Onsen UI template, it returns as UNDEFINED. Here is my code: <!doctype html> <html lang="en" ng-app="simp ...
At this moment, my approach involves utilizing jQuery to position specific elements in relation to the window's size. While this method is effective when the window is at its full size, it encounters issues when dealing with a debugger that's ope ...
I am brand new to osCommerce and recently took over this code. We are looking to improve the layout of the new_products page. Here is the current display code: div class="contentText"> <div class="NewProductsList"> <table border="0 ...