Centre overflowing element around non-centre point

userZEV1 0
Viewed 32

I have an element E that is 1000px wide, that is within a parent container P.

Of E's 1000 pixels of width, the columns x position 600–800px are more important than the others, so as its parent element gets narrower, I'd like to position E within P so that these pixels are visible and centred within P (until this is no longer possible).

So, if P can fit the entire width of E, no problem! Just centre E within P:

             ┌──────────────────────────────────────────────────────────────┐
             │P                                                             │
             │      ┌─────────────────────────┬──────────────┬───────┐      │
             │      │E                        │Important█████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      │                         │██████████████│       │      │
             │      └─────────────────────────┴──────────────┴───────┘      │
             │                                                              │
             └──────────────────────────────────────────────────────────────┘

However, if the parent is resized to be e.g. 250px wide, E should be centred around x=700px:

                                         ┌───────────────────────────┐
                                         │P                          │
                     ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼─────┬──────────────┬──────│
                       E                 │     │Important█████│      ││
                     │                   │     │██████████████│      │
                                         │     │██████████████│      ││
                     │                   │     │██████████████│      │
                                         │     │██████████████│      ││
                     │                   │     │██████████████│      │
                                         │     │██████████████│      ││
                     │                   │     │██████████████│      │
                                         │     │██████████████│      ││
                     │                   │     │██████████████│      │
                                         │     │██████████████│      ││
                     │                   │     │██████████████│      │
                                         │     │██████████████│      ││
                     │                   │     │██████████████│      │
                                         │     │██████████████│      ││
                     │                   │     │██████████████│      │
                                         │     │██████████████│      ││
                     │                   │     │██████████████│      │
                                         │     │██████████████│      ││
                     └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┼─────┴──────────────┴──────│
                                         │                           │
                                         └───────────────────────────┘

Is this possible to achive with CSS? (Maybe using calc()?)

Bonus: Is it possible to have the overflow be scrollable? (If so, I guess JS is needed?)

css-calc css html
1 Answers

You could do this with absolute positioning. For larger screens, position the #Important div absolutely 200px from the right-end of E. For smaller screens, position the div absolutely from the left (e.g., 50px from the left).

See this CodePen for the solution.

With this method, the contents of #Important div will overlap the contents of E which I'm assuming is what you want based on the visuals in your question.

veesar0
Related