The Hong Kong Chess Association website has taken the leap to CSS, with a new layout and look. With the new horizontal navigation bar and liquid CSS positioning, the new layout allows a wider space for content, as well as a less complicated design.

CSS positioning, an alternative to a table-based layout (previously used on this site) allows greater accuracy when positioning elements, as well as higher flexibility when defining heights and widths.CSS-P stands for CSS positioning, which is slightly different from just CSS. CSS stands for cascading stylesheet, which is commonly used for consistent formatting throughout a site. However, CSS has developed so that it can also be used to postition elements, allowing CSS to be used for layout designs.

CSS-P vs Tables

Before, CSS-P became popular HTML tables were normally used to position content on a webpage. It has been a method web designers have been used to for many years, and can manage to get predictable results. That is why most web designers do not feel the need to migrate to CSS-P very quickly.

CSS-P vs Tables is a topic that has always popped up amongst web designers. The truth is, there is no material benefit from replacing tables with CSS divs.

Why switch to CSS then?

• CSS seperates layout and content. The content data resides on the webpage, while the layout data stays in an external CSS file.
• Using CSS divs, important content can be given priority upon pageload
• CSS layouts can be more ‘liquid’, meaning they can take the shape and size of the screen

Afterall, tables are used to display tables of data, and not for laying out elements on a webpage. At the same time CSS-P is commonly perceived as ‘the way forward’. I feel that cleaner code and more flexibility made CSS the way to go for chesshongkong.com.