0

The site I am working on: https://tricycle-203819.appspot.com/ I would like to replicate the effect on this site where there's multiple sections, and the child divs have margins around the sections: https://www.newyorker.com/

On my site, the div container-spice's width and margin to the left and right is set using javascript on load, and on window size. I would like the children of left-container, which is a child of container-spice, to have a margin on the right that is of some constant pixel.

Changing the padding-right and margin-right property of left-container do not achieve this effect. I would like to avoid changing the properties of the children of left-container if possible, since they will be reused elsewhere.

xiaolingxiao
  • 4,793
  • 5
  • 41
  • 88

1 Answers1

1

The reason margin-right on left-container doesn't work is because the right-container won't respect the margin, since it has a position of fixed. You can however add a padding-right to left-container to achieve your desired affect of creating a gap between the two containers.

Nikki Mather
  • 1,118
  • 3
  • 17
  • 33
  • hmm interesting now it works on the left. suppose i wanted a padding on the left side of the right container as well, doing padding-left: 20px does not work. because it's fixed likeyou said? – xiaolingxiao May 14 '18 at 23:31
  • 1
    No. You need to understand what margin and padding do and how they differ to understand exactly why it isn't working as you expect it to. Please see this link as it should help you make sense of why it's not 'working' as you expect -- if you're still unsure feel free to ask and I'll try and help; https://stackoverflow.com/questions/5958699/difference-between-margin-and-padding – Nikki Mather May 14 '18 at 23:35