DEV Community

Cover image for The Only Time I Used Math at Work - and It wasn t What You Think
Manel
Manel

Posted on

The Only Time I Used Math at Work - and It wasn t What You Think

My First “Simple” Task on the Team… Wasn’t So Simple
“Can you make the menu sticky?”
That was the very first task I got.
Simple enough, right?
I’d used

position: sticky
Enter fullscreen mode Exit fullscreen mode

before.
Nothing new. Easy win.
Or so I thought.

The Layout Looked Straightforward
The project already had:

A max‑width layout
Clean alignment
Consistent spacing
A sidebar + main content area

The requirement on paper:

Make the menu sticky and make sure it stays aligned with the content.

And for most screens, it did.
Until I tested it on my monitor.

Where Things Started to Break
On screens wider than 1439px, things suddenly went… wrong.
That’s when I realized something important:
Websites don’t just live on laptops anymore.
People use:
External monitors
Ultrawide displays
High‑resolution desktops

Ignoring large screens means ignoring real users.

The Real Problem
To behave correctly, the sticky menu needed to:

Match the content width
Stay aligned on screens larger than 1439px
Avoid awkward stretching

To do that, I had to stop thinking in fixed pixel values.
I needed one number:
The exact width of the sticky menu.
Let’s call that value: x
So I inspected the layout. It looked roughly like this:

At first glance it seemed simple:

x = margin‑left + padding-left + width of the content column

But — plot twist —
the margin isn’t fixed.
As the screen widens, those side margins grow.
This meant I had two unknowns now:

x = sticky menu width
y = margin‑left (which changes with viewport width)

Time for some real layout math.

Breaking the Layout Down

After inspecting and resizing the screen repeatedly, I discovered:
🟦 The blue area (content + sidebar) = constant = 1202px
This meant both the content and sidebar have fixed widths.
🟧 The orange spaces (side margins) are equal
margin-left = margin-right = y
🟩 Padding is constant
padding-left = padding-right = P = 4px
So the full equation for the page becomes:

100vw = 2y + 2P + B
Enter fullscreen mode Exit fullscreen mode

Where:

100vw = viewport width
y = margin-left
P = padding-left = 4px
B = fixed blue width = 1202px

And the sticky menu width:

x = y + C1 + P
Enter fullscreen mode Exit fullscreen mode

Where C1 was the fixed width of the content section itself.
Now I had a system of equations:

{ x = y + C1 + P
 100vw = 2y + 2P + B }
Enter fullscreen mode Exit fullscreen mode

Solve for y:

y = (100vw - 2P - B) / 2
Enter fullscreen mode Exit fullscreen mode

Plug it into the first equation:

x = ((100vw - P - B) / 2) + C1 + P
Enter fullscreen mode Exit fullscreen mode

And that gave me the responsive width I needed.

The Final CSS

@media (min-width: 1439px) {
  .sticky {
    width: calc(((100vw - 1202px - 8px) / 2) + 794px + 4px);
  }
}
Enter fullscreen mode Exit fullscreen mode

Final Thoughts
This “simple” task taught me two unexpected lessons.
1. Web development has to consider big screens too.
We optimize for:

Mobile (of course)
Laptops (definitely)

But high‑resolution monitors are everywhere now.
If your layout breaks there, people notice.
2. Math hides quietly in everyday front‑end work.
Not scary math.
Just enough to make layouts behave.
My first real task on the team wasn’t glamorous.
But it reminded me:

Sometimes being a developer means doing a little math…
so a menu doesn’t look weird on a big screen.

And honestly, that’s kind of perfect.

Top comments (1)

Collapse
 
manel_belhaj_add79e3003b9 profile image
Manel Belhaj •

Extremely informative, keep up the great work ✨✨