Fluid 3-column layout

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

Features of xy.css

As seen in the next column, only a few lines of CSS are needed for this basic 3-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.

CSS code:

Here is the CSS required for this 3-column layout. Apply to any set of three block-level elements (e.g., <div> or <section>).

section {
	float: left;
	width: 32.80%;
	margin-right: 0.800%;
section:last-child { margin-right: 0; }

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