CSS Three Column Layout

Designing a clean, flexible, three column website is more difficult with CSS than you may think. Unlike when working with tables, CSS styled content does not necessarily always flow in the most flexible manner. You cannot always expect CSS to expand with the content, in the same way that tables might.

This can cause difficulties when, for example, you might want to build a web page with multiple columns. Where table columns would all expand together to fit the column with the most content, CSS columns are typically controlled individually. As such, it can be a challenge to build a three column website where all columns are equal height and can flex with the amount of content within them.

Fortunately, solutions DO exist. One of the best solutions to this problem that I have found so far, can be found at this link: 3 col layout with equalizing columns and footer

In his example, the author has created a flexible CSS layout that will run a three column website, leaving the columns to be flexible enough to grow or shrink as content demands. This design also demonstrates the ability to keep the footer at the bottom of the page, regardless of lack of content. If there is more content than room on the page, the column will extend down. However, if there is less content than needed to fill the page, the footer will stay fixed at the bottom of the window.

CSS Rounded Corners

In the past, one of the downsides of CSS was the fact that it was difficult to create pages with a more rounded look and feel. It is nice at times, to be able to design more than just a simple square box. To avoid this problem, one option has been to create small graphics which sit in the corners of the box and look a bit more pretty than the standard square.

Now, CSS allows us to begin experimenting with other methods of creating rounded corners. One of these methods is being called ‘Spiffy Corners‘ and allows us to make anti-aliased rounded corners with pure CSS. No images required.

Source: Spiffy Corners – Making anti-aliased rounded corners with CSS

CSS Book Review – In search of the One True Layout

Using CSS to layout and design an entire website can be frustrating if you don’t know all the quirks and hacks for all the different browsers, needed to format your pages in a specific way. In addition to this, there is usually a plethora of ways to solve any given CSS problem, not all of which are the most efficient.

For the most part, websites follow fairly basic guidelines when it comes to design. This is partly due to the nature and limitations of a browser screen and partly due to the way in which people naturally read a screen or page. As such, it would make sense that a general set of guidelines for the design of a site could be found. Unfortunately, as standardized CSS is a relatively new technology, the guidelines and best practices in it’s use have not yet been completely set. There are many ways to use CSS in the design of a page, to achieve the same results.

An even greater problem is the fact that CSS still has some shortcomings when it comes to the separation of design and content. While working with CSS for the layout of a site, one must still work within the confines of the HTML code of the page and that is where the problem exists.

Solutions to this problem do exist, and one of the best found so far is entitled In search of the One True Layout. This article lays out in detail, the best ways in which to get around the problems of Total Layout Flexibility, Equal Height Columns and Vertical placement of elements across grids/columns.

Written in 1995 by Alex Robinson and regularly updated since then, the online book is complete with CSS Coding Examples, CSS Best Practices and numerous solutions to design related CSS problems. This is recommended reading for ANY designer or developer, interested in understanding some of the better ways in which to build sites using CSS.