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:

• centered layout
• flexible, fluid column width
• works in all modern browsers
• scales to any size screen
• built with liquid matrix :)

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:

• Grid-based, liquid layout
• Horizontal grid for lateral rhythm
• Vertical/typographic grid
• Responsive @media queries
• Plus much more

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.