Two Columns Fixed CSS/Table/Div Page Layout

Two columns page layout looks pretty simple. It has Header area on top and footer area on the bottom of the page. In the middle are two columns: Navigation area on left side and Content area on the right. Although simple, this layout is very popular and can be very effective. There is no third column on right side, usually reserved for advertisement or some call to action, so two columns page layout usually has fewer ads, but that makes existing inline ads more effective.

Fixed page layout means that size of layout areas is defined in pixels. Because of this, page will look same on every screen resolution or web browser settings. As opposite to fixed page layout, there are Fluid (Liquid) Page Layout and Elastic Page Layout. Creating fixed page layout is often easier than fluid or elastic, but it is possible that your page will be less accessible.

Table layout and div layout have many advantages and disadvantages. This example is hybrid layout that uses best of both worlds: DIV tags are used for Header and Footer area. TABLE tag is used for columns, Navigation area on the left side and Content area on the right. Both TABLE and DIVs tags use CSS to define their appearance. By using CSS, we can decrease page file size. With small file size, pages load faster and bandwidth is reduced.

If two columns are not enough for you, check Three Columns Fixed Page Layout, or select one of page layouts from left menu.