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

Question

I have a

HTML element that takes up 80% of the element on a page and it has a max-width value of max-width: 1220px.

Outside of this

element I have a small SVG arrow - is it possible with the CSS calc() function to have this so it is always in the middle of the area outside the main element on the left hand side?

If I didn't have a max-width property I could just do left: 10% but this only works up until the main element hits it max-width.

The full code is below and I've managed to get it so it aligns with the left hand side of the main element, but I can't get it so it is halfway across the white space on the left hand side. I'm thinking it may not be possible in CSS.

Codepen: https://codepen.io/emilychews/pen/bGEJjwX

Note 1: When viewing the snippet below you'll need to view it full-page because of the max-width value.

Note 2: What I am trying to do is illustrated in the below image.

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

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

  /* THIS IS THE BIT I NEED HELP WITH */
  left: calc((100% - 1220px) / 2);
}

user_12821739 · Answer

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;
}

user_8620333 · Answer

You need to use left: calc((100% - 1220px)/4);. From 100% we remove the width to get the white space. Then we divide by 2 to get only the left part and we divide again by 2 to get half of it.

You can also use min() to make it working for small screen too:

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

.down-arrow {
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 25vh;
  left: calc((100% - min(1220px,80%))/4);
  transform:translate(-50%); /* don't forget this to get a perfect centring */
}

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

2 Answers