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;
- Change to
-
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
- Use
-
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 asvertical-align: middle
- Try making all
-
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;
- Parent container:
-
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.
- Parent container:
-
-
Negative margin-top has no effect
- Try
position: relative;
andtop -#px;
- Try
-
z-index has no effect
- Z-index only affects elements that have a non-default
position
value. Try changing element toposition: relative
- Z-index only affects elements that have a non-default
-
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 evencalc(#%)
)
- Try setting a width (either
- 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"
- where the value is
- 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
- You can use
-
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>
- non-replaced inline boxes includes elements like
- 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
-