Last Updated: 2024-11-23

Some very rought and vague CSS tricks:

1. If a button overflows outside its container, use white-space settings (normal is a good starting point.) Then ensure that the CSS is allowed to break large words word-break: break-word;. I don't know why, but the white-space: pre-wrap setting was also helpful.
   
2. If you cannot center something with margin: auto, change its display to table.
3. If you want to divide the content into two areas using 50% width and then use horizontal margins as well, it won't work because total over 100%. The trick is to introduce passthrough elements such that the 50% can be preserved.
4. Flex allows you to specify that somethings can only grow (and not shrink) and vice versa.
5. If you want list items to stack horizontally, use inline-block
6. If you want to position absolutely (e.g. with right:0) a parent div must have position: relative, otherwise the absolutely positioned element will be outside flow. I.e. it is positioned relative to relatively positioned parent.
7. Margin does not apply in table elements