Joshua's Cheatsheets - Css Troubleshooting
Light
help

CSS Troubleshooting :)

Centering

When in doubt, the "holy reference guide" - https://css-tricks.com/centering-css-complete-guide/

Side-by-side elements

Options:

  • Inline block

    #sibling-A {
      width: 59%;
      display: inline-block;
    }
    #sibling-B {
      width: 40%;
      display: inline-block;
    }
    • Note that there is a slight issue with inline-block; there is built in browser white-space between elements, so they should not actually add up to 100%

      • See this for details.
  • Offset + float

    #sibling-A {
      width: 60%;
      float: left;
    }
    #sibling-B {
      width: 40%;
      margin-left: 60%;
    }
  • Flex (not 100% support)

    .container {
      display: flex;
    }
    .container #sibling-A {
      width: 60%;
    }
    .container #sibling-B {
      flex-grow: 1;
    }

Random

  • Elements is not taking up full height specified (for example, <a style="height:50px;">Link</a>)

    • Change to display: inline-block;
  • Negative margin-top has no effect

    • Try position: relative; and top -#px;
  • z-index has no effect

    • Z-index only affects elements that have a non-default position value. Try changing element to position: relative
Markdown Source Last Updated:
Sat Sep 28 2019 18:59:02 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Sat Aug 24 2019 01:12:38 GMT+0000 (Coordinated Universal Time)