Quick View

Take Your Pick

I t's nice to see all the different layout options in one place. This will be useful not only to see the layout designs but also to assist myself in choosing an appropriate layout as I design each section of a new page in my website.

Fixed Dead-Centred

Scroll the page to notice that the orange container moves with page.

Progressive Enhancement

by Braveheart

Select the yellow box below to execute its code and move the container, fixing its position in the page.

/* Re-centre the box */
$('.deadCentre').css({'position': 'fixed', 'margin': '-45px 0 0 -140px'});

/* Emmet */
aside.deadCentre>(h4>img[src="URL" alt="TEXT" title="TEXT" class="right"]+{HEADER})+p{PARA}

If you now scroll the page, notice the container is fixed to the centre of the page.

You can return the container back to its static position if you click the little red in its top right corner.

Single Line Centred Items

If all we need to do is centre a single item, such as an image, use

/* emmet */ 
p.centre>img[src="URL" alt="TEXT" title="TEXT"]+{PARA}

CSS3

Multi-Line Centred Containers

Read All About It!

The centred content with an image floated to the right.

But what happens when the next line is longer? It probably needs a dynamic max-width set on it depending on its content and location. This has max-width: 20em; set on it as a style attribute.

By Billy Wallace

/* emmet */ 
div.centre-out[style="max-width: 20em;"]>aside.centre-in.round>(h4>img[src="URL" alt="TEXT" title="TEXT" class="right"]+{HEADER})+p{PARA}+p.signature{By Billy Wallace}

Auto-Centred Column

A popular, cross-browser solution to auto-centre a column of content is achieved using margins and width. This technique is used on this site on a number of occasions. The code example will focus on the <body>, which is auto centred within the <html> tag, which defaults to the full width of the viewport.

Auto-Centred Body

/* CSS */
body { 
  margin: 1em auto;
  width: 96%;
}
#content {
  margin: 1em;
}

/* ie.css */
body { 
  _text-align: center;
}
#content {
	_text-align: left; /* auto-centre fix IE */
}

Blockquote Using `column-span:all`

I'm afraid this will certainly 1^st, require more O₂ intake and 2^nd, plenty of H₂O for refreshment because, let me tell you, this is definitely no lover's tryst^[1] my friend. In fact, we are only a mere 1/15 of the way along the path of progressive enhancement, as we learn many technologies; HTML5, CSS3, Ajax, XML, etc. I know you are thinking, what's this all about or even, WTH are you talking about? but with a little help from tools like Zen Coding & jQuery, we can make it.

As Sir Winston Churchill stated:

Now this is not the end. It is not even the beginning of the end. But it is, perhaps, the end of the beginning.

(Inspiring) Speech in November 1942

This content continues on after the blockquote and is part of the same section or other block element that has a class that uses CSS columns. Notice how we can make any block element centre and span across all columns.

/* emmet */ 
section.ideal-cols.justified>h3{HEADER}+P{PARA}+(div.single[style="column-span:all;margin-top:1em;"]>(p{PARA}>cite>a.favicon[href="url" title="title" target="_blank"]{LINK})+(blockquote>p{PARA}>cite>a.favicon[href="url" title="title" target="_blank"]{LINK}))+p{PARA}

No Layout

If no further action was taken on this content and it was viewed in a device that is wider than a small desktop, it would be very difficult to read. If you take a look at this paragraph in such a device, then you will see the issue and realise that we need to do something in order to give the user a better reading experience.

Best for wide code blocks and WW.Teach code usage.

Single Column

Width of 33em which gives about 12 words per line.

/* emmet */ 
section.single>h3{HEADER}+p{PARA}^hr

Full Width Section

If the Default Column Layout is used, then it is effectively a wide, one column layout and may suffice for particular presentations.

If more width is required then we would need to break out of the page wrapper to achieve the effect. When JavaScript is available, clicking this layout will expand it to the full width of the view port and overlay any following content. The effect is reversible to toggle between wide and full-view port widths. Try toggling this content now between the two layouts.

/* emmet */ 
div.single>section.full.round>h3{HEADER}+p{PARA}^^hr

Two Column - CSS Table

Main Content

This is our main focus.

I have used an article element for the block of code.

An Aside

This one gives you control over individual column widths their style and separate content.

/* emmet */ 
section.css-table[style="border-collapse:separate;border-spacing:1em;"]>h3{TITLE}+article.col.main.round[style="background: #FFD8CA url(gradient.svg); background-size:cover;"]>h4{TITLE}+p{PARA}^aside.col.round[style="margin-left:1em;background: #ff0 url(gradient.svg); background-size:cover;"]>h4{TITLE}+p{PARA}

Ideal Columns

22em Elastic Columns and fully Justified. But Justified can be removed if desired. It is just a case of what looks good after all the content has been added. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, atque, dolorum porro consectetur odio veniam eligendi natus corporis voluptate ducimus cum numquam nemo dolores iusto accusamus facere explicabo sit dolore.

/* emmet */ 
section.ideal-cols.justified>h3{HEADER}+p{PARA}^hr

widecolumns - Multiple Columns - Wide

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eligendi, id, reprehenderit officia cum similique cupiditate earum sunt porro repellat ab aut tenetur quasi modi dolores illo eius natus obcaecati ad?

/* emmet */ 
section.widecolumns.justified>h3{HEADER}+p{PARA}*3^hr

Three Column CSS Table

Main Content

The design is focused on keeping the primary content the most important.

This is just an extension of the two-column CSS Table layout.

Responsive

Resizing the browser below 40em (640px) will give a one column layout.
Up to 60em (960px) will be two columns.
Above this breakpoint will be three columns.

Take Care

Remember, three columns and above start to look over-crowded.
Use with care.

/* emmet */ 
section.css-table[style="border-collapse:separate;border-spacing:0.5em;margin-bottom:1em"]>h3{TITLE}+article.col.one.round[style="background: yellow"]>h4{TITLE1}+(p>lorem)^aside.col.two.round[style="background: orange"]>h4{TITLE2}+(p>lorem)^aside.col.three.round[style="background: #faa;"]>h4{TITLE3}+(p>lorem)

elastic-cols - 14em Columns

/* emmet */ 
section.elastic-cols>h3{HEADER}+p{PARA}^hr

multicolumn - Multiple Columns - Narrow

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laudantium, sunt quod consequatur vitae. Voluptate animi non quia recusandae minus! Odit exercitationem ad adipisci perferendis quod ab nostrum iste laborum id.

/* emmet */ 
section.multicolumn>h3{HEADER}+p{PARA}^hr

Read more about fluid and responsive Layouts.

Footnotes

1. lover's tryst: - Secret meeting between lovers.
2. Footnote: - as defined in the Answers.com dictionary reference: A note placed at the bottom of a page of a book or manuscript that comments on or cites a reference for a designated part of the text.

/* emmet */ 
aside#footnotes.single>h6{Footnotes}+dl>(dt>q{$. TERM}^dd{ - DEFINITION.})*3