The Perfect 2 Column Liquid Layout (right menu): No CSS hacks. SEO friendly. iPhone compatible.

Percentage dimensions of the right menu layout

Welcome to the Eighth Square

You have reached EighthSquare.com, a place on the vast chessboard of the Internet where writers, poets, artists, photographers, travelers and such can share their words, images and thoughts with others.

Essays

The Legacy of the Mansarts
by Richard Brafford
Everything you always wanted to know and more about Mansart, his descendants and the Mansard roof.

Travelogue, Part 4, India
by Andrew Nickson
In which the author makes his way through India.

Of Snowflakes, Ice, Figure Skating anda Very Brief Bit About Hexaflexagons
by Ela Schwartz
Inspired by Kenneth Libbrecht's snowflake books, the author goes snowflake-gazing and off on a few tangents.

Bodies: The Exhibition
by Lin Black
One living body's impressions of this controversial exhibit.

The Life and Work of Elizabeth Siddal
by Ela Schwartz
She was best known as the face that peered from numerous paintings by the Pre-Raphaelite Brotherhood, particularly those by her husband Dante Gabriel Rossetti. But Siddal was more than just a mindless muse; she was an artist and poet in her own right. A look at her life, and death, and a selection of her artwork and poetry.

An Evening with Neil Gaiman, A Night in Chelsea
By Anonymous
Pawn goes to hear Neil Gaiman read from his new book, gets an autograph or two and spends the night in a small room amidst some Manhattan greenery.

Battle of the Planets
This August, the International Astronomical Union will determine what constitutes a planet and what to name our latest solar system discoveries. So where does this leave Pluto, Xena and Sedna?

Fireworks in Manhattan
by Norman Borden
Photos of the display over the East River on July Fourth.

The Tetra-Octa-Flexagon
Straight from the pages of Build Your Own Polyhedra, here comes this little-known square flexagon composed of eight isosceles triangles per face. Viva la 8-gon!

New Discoveries of the Hexa-Dodeca-Flexagon
by Ann Schwartz and Jeff Rutzky
The 12-gon is back: this time with more secrets to unveil, such as wormhole mode and a new array of hybrid faces

Flexagon Discovery: The Shape Shifting 12-Gon
by Ann Schwartz
As if ordinary flexagons weren't fascinating enough, here comes a hexadodecaflexagon (12-gon for short) with propellers and rogue triangles. Flexagons aren't created; supposedly there are an infinite number just waiting for someone to discover them. A copywriter does just that and gives us the details

Flexagon Fever
by Ela Schwartz
Who would have thought a writer who didn't get past high school trig and can't draw a straight line would become obsessed with a "mathematical oddity," discovering its properties, and coming up with intriguing designs?

Who Let the Cats Out
Our take on a pressing issue

Poetry and Stories

Not completely forsaken by the Fair Nine

Inshore
by Barry Keane
With strong narrative and an emphasis on mythical and naturalistic motifs, this cyclical poem explores the spiritual and imaginative dimensions of man's journey through life.

The Threnodies of Jan Kochanowski (Treny)
by Barry Keane
Selected translations of this Polish Renaissance masterpiece, wherein the poet, in a cycle of nineteen poems, confronts the death of Orszula, his beloved three-year-old daughter. The poems are accompanied by commentaries which place the work within the traditions of consolation literature found in antiquity.

Footsteps From Another World
by Dáithí Ó hÓgáin
Ireland's mystical past intrudes on its present in these poems by this distinguished professor of Irish folklore.

Picador
by Barry Keane
An imagined night in the Picador Cafe, where in Warsaw, November 1918, five burgeoning Polish poets celebrated the rebirth of the Polish nation with a poetry recital.

Julian Tuwim
by Ela Schwartz
An ode to the Polish poet and one of his greatest works, "The Common Man"

The Ceiling Is...
by Ian Hnizdo, age 8

Saintly Behavior
by Patrick O'Connor

Two Poems
by James Campbell

Javascripty
by Lin Black

Two Nonsense Poems
by Hilda Quinn

Yellow Flowers
by Phil Mitchell
American GIs in World War II experience a rare, and brief, moment of peace.

When Human Voices Wake Us
by Jay Malkin
A seemingly normal day at the beach turns into something else.

Art

The World of Ryszard Kryska
A showcase of the work of this Polish surrealist.

The Nude Reclining
by Richard Brafford
How artists have interpreted this theme from the Renaissance to today.

Travel

Travelogue, Part 3, Myanmar
by Andrew Nickson
A continuation of Mr. Nickson's travels through Mandalay and on into Bagan.

Travelogue, Part 2
by Andrew Nickson
The peripatetic Nickson gives us a glimpse of Burma, aka Myanmar.

Travelogue Part 1
I tinerant traveler and opera fanatic Andrew Nickson takes us from Italy to Morocco and back.

Fireflies in Malaysia
by Michele C. Hollow
Thousands of these fairylike creatures light up the night in the small village of Kampung Kuantan.

Darjeeling to Jaisalmer
by Richard Brafford
In which this temperamental artistic genius gives his neighbors and fellow New Yorkers a break by leaving the country and returns much changed, at least for the moment.

Bikes in China
by Dick Brafford
Why would the Chinese want to be more like us? Read Dick Brafford's take.

Scenes from a Postcard Collection
If you can't join them, at least you can read their postcards.

Skewers

A chess term that describes a sneaky move that can often win you the game.

The Cat Reclining
How artists have interpreted this theme, sort of.

Computer Hell
by Dick Brafford
Something we can all relate to.

Fake Words
Our candidates for the next edition of Webster's.

Who Let the Carts Out?
Forget the cats, here's the real issue at stake.

Where the Sun Doesn't Shine
by Ela Schwartz
A name change for Uranus.

Maximum column content widths

To prevent wide content (like long URLs) from destroying the layout (long content can make the page scroll horizontally) the column content divs are set to overflow:hidden. This chops off any content that is wider than the div. Because of this, it's important to know the maximum widths allowable at common screen resolutions. For example, if you choose 800 x 600 pixels as your minimum compatible resolution what is the widest image that can be safely added to each column before it gets chopped off? Here are the figures:

800 x 600: Right column: 162 pixels; Main page: 550 pixels
1024 x 768: Right column: 210 pixels; Main page: 709 pixels

The nested div structure

I've colour coded each div so it's easy to see:

Two column right menu layout nested div structure

The header, colmask and footer divs are 100% wide and stacked vertically one after the other. Colleft is inside colmask. The two column content divs (col1 & col2) are inside colleft. Notice that the main content column (col1) comes before the side column.

No CSS hacks

The CSS used for this layout is 100% valid and hack free. To overcome Internet Explorer's broken box model, no horizontal padding or margins are used. Instead, this design uses percentage widths and clever relative positioning.

SEO friendly

The higher up content is in your page code, the more important it is considered by search engine algorithms (see my article on link source ordering for more details on how this affects links). To make your website as optimised as possible your main page content must come before the side columns. This layout does exactly that: The the left-hand main page comes first, then the right column (see the nested div structure diagram for more info). The columns can also be configured in the opposite order if required.

Full length column background colours

In this layout the background colours of each column will always stretch to the length of the longest column. This feature was traditionally only available with table based layouts but now with a little CSS trickery we can do exactly the same with divs. Say goodbye to annoying short columns! You can read my article on equal height columns if you want to see how this is done.

No Images

This layout requires no images. Many CSS website designs need images to colour in the column backgrounds but that is not necessary with this design. Why waste bandwidth and precious HTTP requests when you can do everything in pure CSS and XHTML?

No JavaScript

JavaScript is not required. Some website layouts rely on JavaScript hacks to resize divs and force elements into place but you won't see any of that nonsense here.

Resizable text compatible

This layout is fully compatible with resizable text. Resizable text is important for web accessibility. People who are vision impaired can make the text larger so it's easier for them to read. It is becoming increasingly more important to make your website resizable text compatible because people are expecting higher levels of web accessibility. Apple have made resizing the text on a website simple with the pinch gesture on their multi-touch trackpad. So far this trackpad is only available on the MacBook Air but it will soon be rolled out to all of their systems. Is your website text-resizing compatible?

No Quirks Mode

This liquid layout does not require the XML declaration for it to display correctly in older versions of Internet Explorer. This version works without it and is thus never in quirks mode.

No IE Conditional Comments

Only one stylesheet is used with this layout This means that IE conditional comments are not needed to set extra CSS rules for older versions of Internet Explorer.

Browser Compatibility

This right menu liquid Layout has been tested on the following browsers:

iPhone & iPod Touch

Safari

Mac

Safari
Firefox
Opera 9.25
Netscape 9.0.0.5 & 7.1

Windows

Firefox 1.5, 2 & 3
Safari
Opera 8.1 & 9
Google Chrome
Explorer 5.5, 6 & 7
Netscape 8

Valid XHTML strict markup

The HTML in this layout validates as XHTML 1.0 strict.

This layout is FREE for anyone to use

That's right, you don't have to pay anything. If you are feeling generous however, link back to my demo page so other people can find and use this layout too.

Centered menus compatible

This layout is fully compatible with my cross-browser compatible centered menus.

No CSS hacks. SEO friendly. No Images. No JavaScript. Cross-browser & iPhone compatible.