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;
  }

Overflow Debugging

Unfortunately, there aren't a ton of tools to help with CSS debugging, and even less for overflow specifically.

If you have a newer version of Firefox, your DevTools might actually have a feature specifically for this 🤯! See this docs page, and this tweet.

One handy trick is to simply inject a style of something like the following, to help you visualize the space occupied by each element:

* {
	outline: 1px dashed red;
}

Other tips / things to try:

• Using inspect element and hovering over nodes in the tree until you find the offending element

  • You can delete elements as you go, to verify that they are, or are not, causing overflow issues
• Follow the steps / tips in this CSS-Tricks post: Finding/Fixing Unintended Body Overflow

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

• Stretching text or elements with transform, or using transforms at all, seems to have no effect / is not working

  • It is easy to miss, but there are actually certain elements that cannot be transformed: non-replaced inline boxes, table-column boxes, and table-column-group boxes

    • non-replaced inline boxes includes elements like <a>, <b>, and <span>
  • If your element falls in the excluded category, you can try changing to display: block, or wrapping in a wrapper <div> that you then apply the transformation to

• The root html and/or <body> elements are refusing to take up the full browser height

  • If the usual html, body {height: 100vh;} isn't doing the trick for you, try also setting overflow: auto;
  • Lots of tips here

• Flex loses / discards padding on the last child in a container that overflows

  • There are a few fancier solutions, but a nice go-to, which still harkens back to old-school CSS hacks, is using a pseudo element

    .container:last-child::after {
    	content: '';
    	min-width: 8px;
    }