UI Deploy

Curated, Short, Web UI Dev we Love.

Create fluid layouts with HTML5 and CSS3

Ben Frain explains how to create fluid layouts by converting pixel-based grids to proportions.

When I first started making websites at the end of the 1990s, layout structures were table-based. More often than not, sectioning up screen real estate was done with percentages. For example, a left navigation column might be 20 percent whilst the main content area would be 80 percent. There weren't the vast differences in browser viewports we see today, so these layouts scaled well across the limited range of viewports.

view source

Advertisement