Skip to main content

Forums

This topic contains 2 replies, has 2 voices, and was last updated by  amits97 1 month ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #282801

    amits97
    Participant

    Here is the layout I am trying to achieve: https://i.stack.imgur.com/izmN9.png

    Looks simple enough right? But take a good look at the sidebar: the content has to constrained within the parent container, but the background extends to the end.
    Now I know this is possible using some hacky absolute positioning CSS, but I saw something similar being done on the React blog here: https://reactjs.org/blog/2019/02/06/react-v16.8.0.html

    I got the layout fully working in this fiddle: https://jsfiddle.net/w4gkdLv3/3/

    The magic seems to be happening here:

      margin-right: -999px;
      padding-right: 999px;
    

    Seems like a super neat CSS trick. Can anyone explain why this works?

    #282810

    Beverleyh
    Participant

    Negative margin pulls the container boundary way past its original position.
    Padding puts internal content back into its original position.
    It’s a way of extending background colours to the edge of the screen – one of the original ways of achieving seemingly equal height columns (or in this case, width) with CSS before you could fake it with pseudo elements, or do it ‘properly’ with flexbox.

    #282842

    amits97
    Participant

    Thank you for the explanation. That makes a lot of sense :)

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star