Master Advanced CSS Tricks: Negative Margins, Text Truncation, and More

1 Negative Margin for Edge-to-Edge Adaptive Layout

This example shows a four‑column layout that adapts to any width, aligns edge images with the container edges, maintains equal gaps, and uses negative margins to extend outer space.

Negative margins have many other use cases.

2 Text Truncation

When a text string is long, an ellipsis is shown while an accompanying icon remains visible.

3 Using padding‑top Instead of Placeholder Images

Instead of loading a proportional placeholder image, a padding‑top technique reserves space for images that have not yet loaded, preserving layout height without extra requests.

4 Custom File Upload Control Styling

By hiding the native file input and triggering it via a styled label, the upload button can be styled consistently across browsers (excluding IE6).

Clicking the label activates the hidden file input regardless of button size.

5 Media Query Hack for IE9 Opacity

A media query hack avoids setting opacity to 0 in IE9, which does not support animation, while still hiding elements in modern browsers.

Using media queries can create many hacks, but they should be minimized.

6 Mobile Centering of Non‑Fixed‑Size Elements

Using Flexbox, a floating layer component stays horizontally and vertically centered on mobile devices without JavaScript, regardless of width or height changes.