Rachel Andrew - The New CSS Layout

Sometimes, in front of rooms filled with developers who have never had to turn their hand to a font tag or a nested style sheet, I remark that my career on the web predates Cascading Style Sheets (CSS). As CSS celebrates its twentieth birthday, when I look back over my own history of learning and teaching CSS, I marvel at the fact that it has taken until 2017 to come close to cracking how to do layout o n the web .

Before we start looking at the methods for creating layout on the web that have landed in the past few years, I want to revisit where we came from. Doing this historical groundwork is important, because many of todays assumptions about layout stand on the shoulders of what has co me before.

Early CSS layouts were a mixture of floats and positioned elements. A common pattern was to give the main content of the page a wide left or right margin, and then use absolute positioning to place the sidebar into that gap. This workeduntil you wanted a footer on the layout and couldnt be sure the positioned item would not be taller than the main content. A lot of websites attempted to fix the heights of elements to cope with this; it wasnt unusual to discover a page with elements overflowing one another, especially if you adjusted the text size to make fonts larger than the designer expected.

Over time, we became better at layout. Online community-created resources like the Noodle Incident ( http://bkaprt.com/ncl/01-01/ ) still exist, with examples of CSS layouts to copy and paste. These relics of our past remind me how far weve come in terms of the complexity of the designs we buildand yet how much we still lean on the techniques we developed back then.

As we became better at building floated layouts, we continued to be frustrated by the lack of full-height columns. Having floated a sidebar left and the main content right, there was no way to put a background color or image behind that sidebar. It would sit just under the content.

But web designers have always been incredibly resourceful at finding creative ways to use a limited toolset. A solution to the full-height column conundrum came when Dan Cederholm documented his faux columns technique on A List Apart ( http://bkaprt.com/ncl/01-02/ ). By tiling an image behind the entire layout, we could create the effect of a full-heigh t column.

That was just one of the many ways we learned to fake the appearance of layouts. The main debateaside from a few outliers stubbornly insisting we should continue to use HTML tables for layoutrevolved around whether we should build designs that had a fixed pixel width, or designs that stretched to fill the available screen space (sometimes referred to as liquid designs). Those of us who developed and taught these techniques got pretty adept at them, and knew how to identify most of the tricky browser bugs we had to wor k around.

Then came a curveball: the iPhone. As the web community discussed the best way to provide a separate mobile site, Ethan Marcotte set forth his ideas on responsive design ( http://bkaprt.com/ncl/01-03/ ). A whole new challenge for CSS layout mat erialized.

By the time Marcotte detailed his responsive design ideas on A List Apart, many websites had already opted for a fixed-width approach. Larger screens meant that liquid websites stretched too wide, and reliance on methods such as faux columns made it very hard to create flexible grids. Responsive design threw everything up in the air againnot only did we need to create designs that used fluid percentage-based grids, but we had to do so for a multitude of screen sizes. The techniques we had developed fell apart, and we had to revisit how we used floats and other parts of CSS to make layo ut easier.