How to Set the 'Left' Property of My Div Using CSS3 Calc

How to set the 'left' property of my div using css3 calc?

It should work (on Chrome/Safari/Firefox/IE9+): http://jsfiddle.net/GXbJT/

According to Can I Use, Opera doesn't support it. And vendor-specific prefix is still required for WebKit-based browsers:

left:-webkit-calc(100% - 350px);
left:-moz-calc(100% - 350px);
left:calc(100% - 350px);

Keep Element In Middle Of Excess Space With CSS calc() Function

Because the arrow is absolutely positioned, it makes it a lot more complicated to position it relative to the main element. Instead, you can achieve the same effect (if i'm understand what you're looking for correctly!) using a wrapping container and Flexbox (or default CSS to vertically and horizontally center the child elements, I just prefer flex).

What I did was wrap the main element and the arrow in a div, labeled with a class of container. This way, we can position the main and svg relative to each other while still maintaining the flow of the application.

Display flex automatically aligns child elements in a row, which puts the svg and main elements next to each other. Adding align-items and justify-content center ensures that everything remains vertically and horizontally centered. I removed the margin: 0 auto; from main and the absolute positioning from the svg since it's no longer necessary.

Pen with changes, or see below: https://codepen.io/xenvi/pen/OJMGweV

body {
  margin: 0;
  height: 100vh;
}
  
 .container {
   display: flex;
 }

main {
  position: relative;
  width: 80%;
  padding: 6rem 0;
  background: red;
  height: 100vh;
  max-width: 1220px;
}

.down-arrow {
  width: 1rem;
  height: 1rem;
  bottom: 25vh;
}

.arrow-container, .end-container {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-grow: 1;
}

<div class="container">
  <div class="arrow-container">
    <svg class="down-arrow" aria-hidden="true" viewBox="0 0 410.95 355.89">
    <polygon fill="#000" points="205.47 354.89 410.08 0.5 0.87 0.5 205.47 354.89" /></svg>  
  </div>
  <main>
    <div class="row"></div>
  </main>
  <div class="end-container"></div>
</div>

Is it possible to use for an absolute positioned element the calc() function?

It is possible to use calc for top/bottom/left/right. Check the below snippet.

If your sass variable progressBarHeight is in the format of 20px. You can use directly Or try as @Erfan mentioned calc(50% + #{$progressBarHeight});

div {
  position: relative;
  background-color: red;
  height: 200px;
}

span {
  position: absolute;
  background-color: blue;
  top: 20px;
  left: calc(50% - 20px)
}

<div>
  <span>Hi</span>
</div>

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.

Calculate left css value for skewed div

I would do something differently using gradient where you don't need complex calculation:

body,

html {

  width: 100%;

  height: 100%;

  box-sizing: border-box;

  overflow: hidden;

  padding: 20px;

}

#wrapper {

  width: 60%;

  height: 100%;

  position: relative;

  overflow: hidden;

}

.content {

  width: 100%;

  height: 100%;

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: black;

}

.wiper {

  position: absolute;

  height: 200%;

  width: 400%;

  top: 0;

  left: 100%;

  z-index:1;

  background-image:

    linear-gradient(to bottom left,orange 49.5%,transparent 50%),

    linear-gradient(to top right,orange 49.5%,transparent 50%);

  background-size:50.1% 100%;

  background-repeat:no-repeat;

  background-position:left,right;

  transition:all 3s;

}

#wrapper:hover .wiper{

  left:-300%;

}

<div id="wrapper">

  <div class="content">

    Old content

  </div>

  <div class="wiper"></div>

</div>

css calc with center offset

The below works - adjust your HTML to this:

<div class="middle"> this stays in the middle
    <div class="left"> text here </div>
</div>

Change your CSS for .left

.left {
    position: relative;
    right: 60px; //adjust this to change left-right position of the .left div
}

JS Fiddle Demo

---

Related Topics