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:

• 100% parent width (slap it anywhere)
• flexible, fluid column widths
• works in all modern browsers
• scales to any size screen
• built with liquid matrix :)

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.

• 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 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.