#branding

Example 3 column layout with content first

Based on the 960 grid with 220px flanking columns

#content_main

The content in this column comes first in the HTML document order but is displayed in the central column of the layout.

Sesame snaps ice cream fruitcake candy powder chocolate bar croissant macaroon. Chupa chups halvah tart fruitcake. Sesame snaps dessert sweet croissant pudding oat cake caramels gingerbread tart. Gummies fruitcake dragée faworki cookie jelly. Chocolate cake candy sugar plum chocolate bar lollipop. Chocolate bar macaroon candy canes pastry candy pastry lemon drops oat cake bear claw.

Lollipop lollipop gingerbread ice cream brownie danish cotton candy jelly. Liquorice soufflé muffin applicake chocolate marzipan jelly-o. Oat cake gingerbread cake gummi bears. Pudding sugar plum topping candy canes croissant. Halvah tiramisu jujubes danish ice cream chupa chups tootsie roll. Pudding wafer lollipop chocolate jelly beans tootsie roll pie icing. Dessert fruitcake chupa chups soufflé danish chocolate bar. Cookie marzipan liquorice jelly cake.

Chupa chups chocolate cake chocolate jelly. Gummies apple pie faworki jelly tootsie roll biscuit jujubes. Applicake gummi bears donut dragée. Bear claw sweet roll bear claw cheesecake. Gingerbread liquorice dragée macaroon carrot cake. Croissant faworki lollipop.

#content_sub1

This layout uses 3 background images. The image for the rounded column tops is a background image for #navigation and set to position bottom, the image for the rounded column bottoms is a background image in #footer and the faux columns image is a repeating background for #content area.

The layout will expand vertically to contain any amount of content; the background images ensure that it always looks like 3 full-height columns even when they contain content of unequal length.

#content_sub2

This layout required two additional non-semantic divs but the trade-off is that content in the middle column appears first in the markup.

This technique works fine for sites with a fixed width but it will not flex or adapt as is. However, a modification could be made, using CSS3 multiple background images to allow the column widths to vary.