Design SEO Friendly 3 Column Liquid Web Layout

Saturday, August 13, 2011

Percentage dimensions of 3 Column Liquid web Layout

All the dimensions are in percentage widths so the layout adjusts to any screen resolution. Vertical dimensions are not set so they stretch to the height of the content.

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
Left & right columns: 162 pixels
Center page: 357 pixels
1024 x 768
Left & right columns: 210 pixels
Center page: 459 pixels

The nested div structure

Div Arrangements for3 Column Liquid web Layout I've colour coded each div so it's easy to see:





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

Author: Matthew James Taylor

1 comment:

Fritz John Marajas said...

offers proven, industry-leading search engine optimisation (SEO) strategies that are designed to increase website traffic and conversion. Our online marketing experts have improved and maintained high performance results that have met and exceeded client expectations. Expect high return on investment (ROI) when you have Rotapix Interactive on your team.

web design and seo

Post a Comment