Discussion about math, puzzles, games and fun. Useful symbols: ÷ × ½ √ ∞ ≠ ≤ ≥ ≈ ⇒ ± ∈ Δ θ ∴ ∑ ∫ π -¹ ² ³ °

You are not logged in.

- Topics: Active | Unanswered

**renevanderlende****Member**- From: The Netherlands
- Registered: 2020-01-06
- Posts: 28

Hi everyone,

This is not a request for coding help, but a genuine math problem used for:

Writing a tutorial for Codepen (non commercial CSS/HTML developers site) on using 'columns' in CSS.

It shows how to one can use "y = mx + b" to solve a variety of variable size, width and height problems,

saving time and amount of code.

I am using "y=mx+b" for points p1(320,80) and p2(1920,240) => y = 0.1x + 48, meaning:

at 320 we have column width 80 (4 columns)

at 1920 we have column width 240 (8 columns)

So, in this case "y = 0.1x + 48" yields a column width at any given screen width.

X-values 320 and 1920 are given

Y-values 80 and 240 were derived by dividing 320 and 1920 by 4 and 8 respectively.

Given result '0.1x + 48', how do I find the exact column width for 5, 6 and 7 columns

without drawing a xy-graph and find the answer visually (like with a little tool I created on

GeoGebra ERS linear equations (ERS - easy responsiveness series)

In CSS this would look something like:

column-width: calc(0.1 * 100vw + 48px); /* 100vw = 100% of current viewport width */

Unfortunately in CSS it is not possible to substitute 'column-width' like:

column-count: calc(column-width / some-equation);

And calc() only accepts +,-,*,/ as math operators

Thanks for your help!!

*Last edited by renevanderlende (2020-02-13 03:29:34)*

Offline

**Bob****Administrator**- Registered: 2010-06-20
- Posts: 8,914

hi renevanderlende

I've applied a little algebra. You have y = 0.1x + 48 and also number of columns = x/y

Let's say you want 7 columns.

x/y = 7 => x = 7y

Replace x in the equation

y = 0.1 times 7y + 48 = 0.7y + 48 => 0.3y = 48 => y = 48/0.3 = 480/3 = 160

So the column width is 160 and x = 7 x 160 = 1120

Test to see if this works

If x = 1120 then y = 0.1x + 48 = 112 + 48 = 160. And the number of columns = x/y = 1120/160 = 7 as required.

Hope that's what you wanted.

Bob

Children are not defined by school ...........The Fonz

You cannot teach a man anything; you can only help him find it within himself..........Galileo Galilei

Sometimes I deliberately make mistakes, just to test you! …………….Bob

Offline

**renevanderlende****Member**- From: The Netherlands
- Registered: 2020-01-06
- Posts: 28

Hi Bob,

Thanks a bunch! Nice clarification, now that I see the solution it seems so obvious. Been staring at the puzzle for hours, but no lightbulbs came on flashing.

In the mean time I added the line to my tool (new link, purple line) and noticed that for every 20x there is a 2y skip starting at (0,48) then (20,50), (40,52), (60,54) and so on. Knowing this, is there an alternate way to calculate 'column-count' and 'column-width' instead of '0.1x + 48'? (Yes, I genuinely s u c k at this!)

BTW x is always known (100vw, current browser width in pixels)

Arghh: column-count = 100vw / (0.1 * 100vw + 48) = 8 for x=1920 => 1920 / (192 + 48) = 8

Sorry, never mind the above question, I am caught in a bit of cyclic reasoning....ing....ing....ing

*Last edited by renevanderlende (2020-02-13 11:51:22)*

Offline