CSS Three Column Layout

 –  Comments Off on 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.

Related Reading:

PHP for the Web: Visual QuickStart Guide (5th Edition)PHP for the Web: Visual QuickStart Guide (5th Edition)Learn PHP programming the quick and easy way!
With PHP for the Web: Visual QuickStart GuideĀ readers can start from the beginning to get a tour... Read More >
PHP Cookbook: Solutions & Examples for PHP ProgrammersPHP Cookbook: Solutions & Examples for PHP Programmers

Want to understand a certain PHP programming technique? Or learn how to accomplish a particular task? This cookbook is the first place to look. Wit... Read More >

The Joy of PHP: A Beginner's Guide to Programming Interactive Web Applications with PHP and mySQLThe Joy of PHP: A Beginner's Guide to Programming Interactive Web Applications with PHP and mySQLThird Edition now with bonus chapters. Have you ever wanted to design your own website or browser application but thought it would be too difficult o... Read More >
Filed in: CSS Tips & Ideas

Comments are closed.