CSS Troubleshooting Cheatsheet :)
Light
help

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;
  • Side-by-side elements of the same height are not aligning vertically

    • Try making all display: inline-block, and then giving them all the same vertical align property, such as vertical-align: middle
  • 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
  • Random blue line outline showing around inputs, buttons, etc.

    • This is generated by the browser, to help with accessiblity on focused elements.
    • Please do not remove - see this
    • If you absolutely have to, you can set :focus {outline: 0} or have it more specifically target your element - You should replace it with at least some sort of visual indicator for focused
Markdown Source Last Updated:
Wed Jan 29 2020 04:47:17 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Sat Aug 24 2019 01:12:38 GMT+0000 (Coordinated Universal Time)