Aligning Content material In Completely different Wrappers

The opposite day, I used to be engaged on an article structure and I stumbled upon an fascinating downside to unravel. Right here it’s:

As you see, we’ve got the next:

• Important header: emblem and navigation
• Article header: headline and teaser
• Physique content material

The primary header is wrapped with a fixed-width aspect that’s centered horizontally.

<header class="site-header">
  <div class="wrapper">
    
  </div>
</header>

.wrapper {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

For the article header, it’s not wrapped into something and lives by itself.

<header class="site-header">
  <div class="wrapper">
    
  </div>
</header>
<div class="article-header">
  <h1></h1>
  <p>!-- Description --></p>
</div>

The issue right here lies within the article header. For those who discover within the determine above, it has left padding that makes it aligned with the place the emblem begins. At first, it appears doable, however you’ll change your thoughts when resizing the display.

Within the following determine, the display dimension bought bigger. Discover how the article header isn’t aligned with the emblem.

When the display dimension is smaller, the difficulty can even occur.

To recap, the issue we’re making an attempt to unravel right here is to have a padding-left worth that’s dynamic primarily based on the area from the left fringe of the display to the beginning of the content material wrapper.

Think about the next determine. The primary header and physique content material are each wrapped right into a fixed-width aspect, however the article header just isn’t. What we wish to obtain is a dynamic padding worth for the article header.

To realize that, we have to do some math. Right here it’s in plain phrases:

dynamic padding = (viewport width – wrapper width) / 2

Let’s take the next instance.

Given the values we’ve got, right here is the dynamic padding worth:

dynamic padding = (1300 – 1100) / 2 = 100

You is likely to be questioning, why divide by 2? Effectively, as a result of we’ve got dynamic areas on each left and proper, we solely want one facet.

The answer

In CSS, we’ll use the next to attain the above:

• Viewport models
• calc() operate
• max() comparability operate
• CSS variables

We are able to use the worth 100vw to get the complete width of the viewport

.article-header {
  padding-left: calc(100vw - calc(1100px / 2));
}

That method, the worth of the padding-left will probably be dynamic and can make the article header content material aligned with the emblem and navigation.

Although, we’re not completed. We have to account for the .wrapper horizontal padding.

.article-header {
  padding-left: calc(100vw - calc(1100px / 2) - 32px);
}

The 32px is the sum of the left and proper padding.

Dealing with the padding on cell

Since we subtracted the padding worth from the wrapper, the article header padding will probably be zero on cell.

To revert the padding again, we have to get assist from the CSS max() operate. The objective is to offer it a minimal worth for the padding.

.article-header {
  padding-left: max(1rem, calc(100vw - calc(1100px / 2) - 32px));
}

That method, the horizontal padding will probably be no less than 1rem, and can turn out to be dynamic when the viewport dimension will get bigger.

You possibly can study extra about max() and its buddy in this text by yours actually.

Utilizing CSS variables

To make issues much more summary, we will add all of the above inside one CSS variable so we will use it somewhere else.

:root {
  --wrapper-width: 1100px;
  --wrapper-padding: 16px;
  --space: max(
    1rem,
    calc(
      (
          100vw - calc(var(--wrapper-width) - var(--wrapper-padding) *
                2)
        ) / 2
    )
  );
}

.article-header {
  padding-left: var(--space);
}

The one difficulty with 100vw

On Mac OS, the scrollbars aren’t seen by default until the person selected that from the system preferences. If the scrollbars are seen by default, the 100vw will probably be equal to 100% of the viewport width minus the scrollbar width. This may trigger a misalignment difficulty.

Because the aspect doesn’t reside in a wrapper, we will exchange the 100vw with 100% as a substitute, and it’ll work as anticipated.

:root {
  --wrapper-width: 1100px;
  --wrapper-padding: 16px;
  --space: max(
    1rem,
    calc(
      (100% - calc(var(--wrapper-width) - var(--wrapper-padding) * 2)) /
        2
    )
  );
}

.article-header {
  padding-left: var(--space);
}

UppubDate: 15 March 2022

Dannie Vinther jogged my memory that max() will do the maths with out the necessity of the calc() operate. Neat!

:root {
  --space: max(
    1rem,
    100% - (var(—wrapper) - ((var(—wrapper-padding) * 2) / 2))
  );
}

See the Pen
Untitled by Ahmad Shadeed (@shadeed)
on CodePen.

That’s it for this little CSS trick. I hope you’ve realized one thing new!