Aligning Content material In Totally different Wrappers

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

As you see, we have now the next:

• Primary header: brand and navigation
• Article header: headline and teaser
• Physique content material

The principle header is wrapped with a fixed-width factor that’s centered horizontally.

<header class="site-header">
    <div class="wrapper">
        <!-- Header content material -->
    </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">
        <!-- Header content material -->
    </div>
</header>
<div class="article-header">
    <h1><!-- Title --></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 brand begins. At first, it appears doable, however you’ll change your thoughts when resizing the display.

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

When the display dimension is smaller, the problem may 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 based mostly on the area from the left fringe of the display to the beginning of the content material wrapper.

Contemplate the next determine. The principle header and physique content material are each wrapped right into a fixed-width factor, however the article header is just not. 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 have now, right here is the dynamic padding worth:

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

You could be questioning, why divide by 2? Nicely, as a result of we have now dynamic areas on each left and proper, we solely want one facet.

The answer

In CSS, we are going to use the next to attain the above:

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

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

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

That manner, the worth of the padding-left shall be dynamic and can make the article header content material aligned with the brand 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 shall be zero on cell.

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

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

That manner, the horizontal padding shall be no less than 1rem, and can change into dynamic when the viewport dimension will get bigger.

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

Utilizing CSS variables

To make issues much more summary, we are able to add all of the above inside one CSS variable so we are able to 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 concern 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 shall be equal to 100% of the viewport width minus the scrollbar width. This may trigger a misalignment concern.

For the reason that factor doesn’t stay in a wrapper, we are able to substitute 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);
}

Replace: 15 March 2022

Dannie Vinther jogged my memory that max() will do the maths with out the necessity of the calc() perform. 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 discovered one thing new!