How to Use The Auto Value with The Calc() Property

Can I use the auto value with the calc() property?

Looking at my own question today, I feel ashamed why I couldn't think it correctly? Basically, auto margin is what left margin 50% minus width of the div. In this basis, we can layout the element like this:

margin-left: calc(50% + 5px);
transform: translateX(-50%);

Using the preceding code is equivalent to calc(auto + 5px);. Since, calc doesn't support auto we need to trick with actual concept of translation. This means we can also layout with absolute position with the concept of 50% - half of width, but I like transform here for simplicity.

See the demo below:

.parent{  position: relative;}.child{  border: 2px solid green;  width: 25%;  height: 50px;  margin: 10px auto;}.right{  margin-left: calc(50% + 20px);  transform: translateX(-50%);}.left{  margin-left: calc(50% - 20px);  transform: translateX(-50%);}#border{  height: 100%;  border: 1px solid yellow;  width: 25%;  margin: auto;  position: absolute;  z-index: -1;  top: 0;  left: 0;  right: 0;}

<div class="parent">  <div id="auto" class="child">    auto margin  </div>  <div id="auto-right" class="child right">    auto + pushed to right  </div>  <div class="child left">    auto + pushed to left  </div>  <div id="border"></div></div>

How to use CSS calc() with an element's height

I think you are trying to run script in a css syntax, which is NOT POSSIBLE.

calc() can do basic math operation with absolute values, it cannot find the height of an element and then perform math on it.

css calc invalid property value

You can't divide by units like px, only numbers.

can I calculate the value of CSS property of a dynamically changing div and use to calc() the value for positioning a sibling div in CSS?

Note: Javascript solutions are welcome but I need to know if this is achievable by CSS only? Also the con of Javascript is if user resizes the window in this case I need another eventlistener for this.

Simply, no. CSS alone will not be able to determine the position of an element in order to style an element. You will indeed need a dynamic solution using JS for this.

It sounds like you are writing your own tooltip library for your application. If this is the case, I recommend considering third-party solutions for this as they already have done much of the heavy lifting an often already address accessibility needs. Some I found, though have not used myself:

Tippy.js
Popper.js
or if you're already using a UI toolkit, check if it is already built in. For example, Bootstrap already uses popper.js for this.

If you are determined to write your own JS for this you are correct in that you will need a resize event listener. Be sure to use a debounce function for this so you don't encounter performance problems.

Group 'calc()' CSS property; using margin shorthand?

The syntax, if you wanted to set the top/bottom and left/right margins, for the margin shorthand property is:

margin: TB_value LR_value

You appear to be trying to write it as:

margin: TB_LR_value_value

Don't put the 0s in the middle of your TB value. Put them after it as normal. You only need one for the L and R values anyway.

margin: calc(6.25% - 5px) 0;

How to calculate the 'min-height' value for the 'main' element of a template, in css with variables

Your assumption is incorrect, auto will not be replaced with a value. It will always remain auto (your browser will do the work but it will not show up in the CSS variable).

So either set the value(s) to something that can be used inside calc() or use another approach (back in the day we used Javascript to read the "dimensions" of objects if they had "dynamic" properties).