Two Column Layouts

From CSS Discuss

Jump to: navigation, search

Compared to 3 column layouts, there aren't that many well-commented 2 column versions. Although this is arguably because 2 column layouts are less useful/popular per se, it is just as much the case that they provide less opportunity for flexing one's css muscle. 2 column layouts are simply a subset of 3 column ones.

Any 3 column layout can be made into a 2 column layout. Usually, simply by discarding the third column. The examples on the Three Column Layouts page should cover most situations.

Community MX produces CSS layout templates, called Jump Starts , that come with CSS fully commented, as well as a bundle of article explaining the techniques used in the layout, and all source files. The North Pole Jump Start is a free two column, fixed width layout: D6 D77 Community MX Jump Start - North Pole

The perfect 2 column liquid layout: left menu, right menu and half-half No hacks!* 2-1 column ordering. Full height columns.

More two column layouts:

Glish's 2 columns ala style Blue Robot's 2 columns White Cappuccino 2 column layout css-petals.net

On January 23, 2004, Ryan Brill posted (on mezzoblue.com) a method for creating a two-column layout with a footer by using negative margins. The sidebar follows the main content in the HTML, and neither the content nor the sidebar ever overlap with the footer, no matter which is longer. This method works in IE 5+, Mozilla 1.7+ and Firefox 1+, Opera 8+, and Netscape 7+ on Windows, and Safari 1.1+ and IE 5+ on Mac, and Konqueror on GNU/Linux.


Ryan Brill's solution involving negative margins Ryan Brill's article on A List Apart June 2004

Unfortunately Ryan Brill's solution immediately fails in the presence of aligned images. Take a look at my page that illustrates the problem. Page illustrating the problem (link tried Sat, Jun 10, 2006 and found to be broken - 404 not found - could owner please update?) I see this as a problem with using the deprecated align attribute, rather than the layout. Float should be used to align images. -- Zoe Gillenwater

On October 21, 2005, Alex Robinson posted (on positioniseverything.net) a anyorder method for creating layouts with any numbers of columns in any order. It can therefore cope with 2 columns no problem.

Online Tools and links

2columns.net - generates layout with two columns with equal height

Pagecolumn's 2 column layout generator.

  • drag the slider to change the width.
  • change the color in color palette

* "No hacks" except that it requires overflow:hidden which will truncate any text wider than the div.
Personal tools