Email Fluid Width

Definition

Email fluid width is a layout approach in which an email's container is defined as a percentage of the viewport rather than a fixed pixel width, allowing it to expand and contract with the screen. This differs from a fixed-width email, which always renders at a set size regardless of device. Fluid design improves compatibility across desktops, tablets, and phones.

How It Works

In a fluid layout, the outer table or container uses a width value such as 100 percent, and inner columns use percentages that add up to the available space. As the screen narrows, the columns shrink proportionally. This technique is often paired with a max-width constraint so the email does not stretch too wide on large monitors. The result is a layout that adapts smoothly without necessarily relying on media queries.

Fluid width is especially valuable because some email clients do not support media queries and therefore never trigger a mobile breakpoint. In those clients, a fluid layout still narrows to fit the screen, reducing the need for horizontal scrolling. However, fluid layouts alone do not stack columns, so very narrow screens can still become cramped if content is dense.

Best Practices

• Use percentage-based widths with a max-width limit, typically around 600 pixels.
• Avoid fixed pixel widths for the outer container where a fluid design is desired.
• Combine fluid width with responsive stacking for the best mobile experience.
• Test at multiple viewport sizes to confirm content does not become too compressed.
• Keep images fluid by setting their width to 100 percent with an appropriate max-width.

Example

A nonprofit builds its donation email using a 100-percent-wide container capped at 600 pixels. On a desktop, the email sits comfortably centered at 600 pixels; on a phone, it narrows to fill the screen. Because the layout is fluid, even an older email client that ignores media queries still displays the message without horizontal scrolling, supporting better email accessibility and engagement.