Joshua's Cheatsheets - CSS Troubleshooting Cheatsheet :)


When in doubt, the "holy reference guide" -

Side-by-side elements


  • 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 CSS Troubleshooting and FAQs

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

    • Change to display: inline-block;
  • Element is taking up full width of parent, instead of respecting width: auto;

    • Use display: inline-block; - you don't even need width to be specified with this
  • 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
  • How to force side-by-side elements to take up the same height? (aka equal height columns, or filling container)

    • Option: table display

      • Parent container: display: table; width: 100%;
      • Child: display: table-cell;
    • Option: flex (optimal)

      • Parent container: display: flex;
      • Child: flex: 1
      • Note: Counter-intuitive, but you can add flex-direction: column; to parent, to force vertical equal height rows, instead of horizontal equal height columns.
  • 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 accessibility 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
  • Text overflow ellipsis not working

    • Do you have {overflow: hidden, white-space: nowrap, text-overflow: ellipsis} on?

      • Try applying it to the lowest element containing the text - ideally the (div / span / p) that is directly containing the text
    • Is it inside a flex? Try adding min-width: 0 to the outermost element that is overflowing the parent
    • Is there no set width on the element containing the text?

      • Try setting a width (either px, %, or even calc(#%))
    • Are you trying to do this with a <span>? Try changing to <div>.
  • How to make an inline SVG be responsive?

    • Try adding a viewBox attribute on the SVG element

      • where the value is x, y, width, height
      • Example: viewBox="0, 0, 100, 200"
    • Relevant article: CSS Tricks: How to Scale SVG
  • How to compensate for a border adding width and height to a child?

    • You can use box-sizing: border-box, to have borders taken into account
Markdown Source Last Updated:
Fri Oct 02 2020 23:08:07 GMT+0000 (Coordinated Universal Time)
Markdown Source Created:
Sat Aug 24 2019 01:12:38 GMT+0000 (Coordinated Universal Time)
© 2020 Joshua Tzucker, Built with Gatsby