Fluid single-column layout

When added to the xy.css matrix, a few lines of CSS produce what you see here: a concise single-column layout with the following features:

Features of xy.css

As seen below, only a few lines of CSS are needed for this basic single-column layout. That code should work fine as-is, but when added to the xy.css matrix, it’s like building with liquid lego blocks. You just start snapping layout items into place and let the CSS matrix work the magic. Features include:

CSS code:

Here is the CSS required for this single-column layout. Use the body width to establish the margins. For no margins, just set any block-level element to 100% width.

body {
	width: 77.60%;
article {
	width: 100%;

Note that some additional styles are used for this demo, but if you just want a nice, percentage-based, single-column layout, this is the basic code to use.