A List Apart: Articles: Faux Columns - The Diigo Meta page

• 03 May 12
  

  T. Karhu

  "background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;"

  css web design

  • when you use <div>s to section your markup, then apply CSS to create a columnar layout. One column may be longer than the other (see Figure 1). Depending on the amount of content contained, it becomes difficult to create a layout with two equally tall columns when a unique background color is desired for each column.
• 18 Apr 12
  

  masterjm

  joomla tutorial webdesign layout css

• 21 Feb 12
  

  maarten03
• 14 Feb 12
  

  MJ Kang

  css webdesign columns layout

• 31 Jan 12
  

  Jesse Nobbe

  webdesign webdev css columns layout design tutorial

• 29 Jan 12
  

  css columns design

• 25 Jan 12
  

  bigtone1963

  css columns layout

• 14 Nov 11
  

  Ezequiel Lavaca

  fauxcolumns

• 28 Oct 11
  

  Marco Grossi

  webdesign layout columns css

• 05 Oct 11
  

  Anthi Mi

  DDM

• 14 Jul 11
  

  neachtan

  0. WEB DESIGN CSS

• 17 Jun 11
  

  Valérie Gilson

  css layout design columns

• 31 May 11
  

  Luca Cavallotto

  come far apparire della stessa altezza due colonne

  css tutorial columns layout

  • The embarassingly simple secret is to use a vertically tiled background image to create the illusion of colored columns. For SimpleBits, my background image looks something like Figure 2 (proportions changed for demonstration), with a decorative stripey thing on the left, a wide white section for the content column, a 1 pixel border, and a light brown section for the right column’s background followed by the reverse of the left side’s decorative border.

       

    
     Figure 2

      

    The whole image is no more than a few pixels tall, but when vertically tiled, it creates the colored columns that will flow all the way down to the bottom of the page — regardless of the length of content in the columns.

  • This elementary CSS rule is added to the body element:

      

    background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

  • It’s important to note that if borders, padding and margins are desired on either column, then we must still make up for IE/Win’s botching of the box model with Tantek Çelik’s Box Model Hack or Mid Pass Filter.

      

    Alternatively, if borders or padding can be avoided altogether by just using margins instead, then the the Box Model Hack will not be necessary. And if the column’s content is simply sitting (transparently) on top of the tiled background, then it should be easy to avoid the hack.

  • While I use absolute positioning to create a two-column layout on my own site, equally fine results can be achieved via the float property (as seen here at ALA).

      

    The same idea applies: tile the background image, then float a column in position to overlay the faux-column backdrop behind.

  2 more annotations...

• 04 Apr 11
  

  Margarete Koenen

  • The CSS

      

    This elementary CSS rule is added to the body element:

      

    background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

      

    Essentially, we’re making the entire page’s background color grey and tiling it vertically only (repeat-y). The 50% 0 bit refers to the positioning of the background image — in this case, 50% from the left side of the browser window (resulting in a centered image) and 0 pixels from the top.

  • It’s important to note that if borders, padding and margins are desired on either column, then we must still make up for IE/Win’s botching of the box model with Tantek Çelik’s Box Model Hack or Mid Pass Filter.

      

    Alternatively, if borders or padding can be avoided altogether by just using margins instead, then the the Box Model Hack will not be necessary. And if the column’s content is simply sitting (transparently) on top of the tiled background, then it should be easy to avoid the hack.
• 01 Apr 11
  

  Jacob Dorman

  css columns faux columns webdesign

• 29 Mar 11
  

  garret

  layout tutorials alistapart webdevelopment CSS-layout

• 20 Mar 11
  

  s_m_roberts

  css webdesign columns layout design tutorial Web html

• 13 Mar 11
  

  JoAnn Chateau

  css columns layout

• 11 Mar 11
  

  Tom Lehman

  css design web

• 22 Feb 11
  

  Matthew McGuire

  A simple solution for having columns extend.

  css columns webdesign layout design tutorials

• 16 Dec 10
  

  Sara Ziemendorf

  css faux columns delicious

• 12 Dec 10
  

  webdesign CSS

• 21 Oct 10
  

  Ralf Hafner

  css layout tricks columns

• 20 Oct 10
  

  Xlaze .

  columns faux css layout tutorial

• 19 Oct 10
  

• 18 Oct 10
  

  Rui Jiang
• 13 Oct 10
  

  pablo lobos

  ramohtmlcss

• 08 Oct 10
  

  css webdesign

• 29 Sep 10
  

  Kars Borgulas

  css webdesign howto tutorial columns vertical stretch

• 

  Malene Kirstine Olesen

  html css faux-columns

• 28 Sep 10
  

  Petar Vucetin

  WebDesign

• 19 Sep 10
  

  Reinhard Prechtl

  css column layout howto tutorial tips webdesign

• 23 Jul 10
  

  Fabio Yamate

  article columns hacks layout css howto

• 28 Jun 10
  

  januitgever

  background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;

  CSS

• 17 May 10
  

  Sakina Zorayq

  article column background webdesign reference

• 12 May 10
  

  Matt Reed

  How do you get the right column’s background color to extend all the way down the page?

  css webdesign columns layout

• 11 May 10
  

  Dean Stringer

  css columns layout design

• 27 Apr 10
  

  Dana Ditman

  WebsiteDesign CSSlayouts

• 06 Apr 10
  

  chilliscope

  css

• 18 Feb 10
  

  Juan Garcia

  css hacks

• 08 Feb 10
  

  yuukaa

  webdev webdesign faux-columns Equal-Height-Columns css layout

• 22 Jan 10
  

  Jesse Bruton

  Imported From Firefox Development CSS

• 21 Jan 10
  

  Amanda Sage

  with a decorative stripey thing on the left, a wide white section for the content column, a 1 pixel border, and a light brown section for the right column’s background followed by the reverse of the left side’s decorative bord

  web resources

• 13 Dec 09
  

  avipinto

  working on the background

  css

• 12 Dec 09
  

  Eric Bellot

  L'article original expliquant la technique des colonnes factices. Il s'agit d'une méthode pour créer l'illusion que les colonnes d'un gabarit HTML/CSS aient toutes la même hauteur quelque soit la longueur de leur contenu.

  HTML CSS webdesign gabarit

• 30 Nov 09
  

  shaoshuai0102

  css Web

• 28 Nov 09
  

  Head Fake

  design css layout a-list-part columns

• 24 Nov 09
  

  A. V. Venegas-Steele

  design web reference tools tutorials css html layout hacks code columns backgrounds web_design

• 22 Nov 09
  

  Sonia Rodriguez

  faux columns css webdesign layout

• 03 Nov 09
  

  Alberico Anobile

  webdesign css html layout xhtml

• 16 Oct 09
  

  Patrycjusz Szydło

  css tips

• 30 Jul 09
  

  Ryan McCutchen

  layout tutorial ux css

• 29 Jul 09
  

  Ziv Kaufman

  css webdesign layout tutorial

• 06 Jul 09
  

  Danny Lloyd

  columns html webdesign development programming web tutorial css tutorials blog howto design reference tips layout tools hacks height faux alistapart articles fauxcolumns column fromDelicious

• 29 Jun 09
  

  Chris Miller
• 27 Jun 09
  

  Gustavo Pereira

  It’s a beginning CSS designer’s nightmare and a frequently asked question at ALA: Multi-column CSS layouts can run into trouble when one of the columns stops short of its intended length. Here’s a simple solution.

  css

• 02 Apr 09
  

  luca ottolini
• 25 Mar 09
  

  Rick Green

  howto css webdesign tutorial layout design columns

• 16 Mar 09
  

  This elementary CSS rule is added to the body element:
  
  background: #ccc url(../images/bg_birch_800.gif) repeat-y 50% 0;
  
  Essentially, we’re making the entire page’s background color grey and tiling it vertically only (repeat-y). The 50% 0 bit refers to t

  css webdesign

• 09 Mar 09
  

  Surakarn Samkaew

  css design

• 27 Feb 09
  

  leo foto

  css-faux-columns

• 20 Feb 09
  

  amit_e

  webdesign layout tutorial alistapart dan cederholm Faux Columns

• 05 Feb 09
  

  Lee Howard

  This column offers a helpful "cheat" for programmers seeking to have a vertical background color extend all the way down the page. A quirk in CSS sometimes results in making it difficult for columns to extend the full length. The solution is to create a vertically tiled background image that "forces" vertical columns to extend all the way.

  webprog-2-a

• 28 Jan 09
  

  Roxana Elizondo

  webdesign

• 20 Jan 09
  

  eva durall

  css html webdesign

• 17 Jan 09
  

  organised

  css webdesign development design

• 16 Jan 09
  

  Penelope Else

  website html

• 06 Jan 09
  

  PoSheng Hsu

  unread

• 19 Dec 08
  

  s scott

  webdesign layout css

• 13 Oct 08
  

  Andy Foster

  imported Bookmarks Bookmarks_Bar links

• 

  Andy Foster

  alist apart faux columns css

• 05 Oct 08
  

  sebastien fauveau

  css column webdesign

• 22 Sep 08
  

  jeffcressman

  equal height css columns the tiled image way

  css columns howto webdesign tutorial

• 17 Sep 08
  

  Michael Mulich

  A simple method of making CSS columns appear equal in length, regardless of the content that they contain.

  Bookmarks Web css

• 25 Aug 08
  

  Igor Longagnani
• 18 Jun 08
  

  Laurent De Goede

  css layout columns webdesign design tutorial howto web

• 29 May 08
  

  shahafb

  css layout

• 20 May 08
  

  Bill Wolff

  “Faux Columns” by Dan Cederholm of SimpleBits discusses “[a] simple way to make CSS columns appear equal in length, regardless of the content that they contain.” This technique requires a good amount of skill in positioning elements on a page and understanding the nuances of the background image.
  
  I’d like to try it, but don’t anticipate using it any time in the near future, but because we’re using Wordpress I’m not sure I’ll be needing to any time soon.

  css webdesign columns design layout faux vertical cederholm

• 09 May 08
  

  slith one

  One of the questions I get asked the most often regarding my personal site’s design is the following: “How do you get the right column’s background color to extend all the way down the page?” It’s a simple concept, really — one that many of you may alread

  css

• 02 May 08
  

  Raghu Rajagopalan

  html css layout webdesign columns

• 21 Apr 08
  

  Nick Dawe

  fauxcolumns css hacks

• 18 Apr 08
  

  Perttu Piirto

  A simple method of making CSS columns appear equal in length, regardless of the content that they contain.

  imported firefox:bookmarks css

• 05 Apr 08
  

  David Fahy

  Personal Toolbar Folder 学習 creation ALA

• 01 Apr 08
  

  forward march

  FAUX COLUMNS
  VERTICAL STRETCH DIVS 100%

  css

• 

  Zippy Squirrel

  FAUX COLUMNS
  VERTICAL STRETCH DIVS 100%

  css

• 31 Mar 08
  

  diigouser2

  aq column css stretch trick vertical vertical fill

• 26 Mar 08
  

  Jeremy Smith

  CSS

• 21 Mar 08
  

  malin cantwell

  CSS

• 09 Mar 08
  

  Alexandre Junqueira

  css css-reset css-framework

• 03 Mar 08
  

  Heidi Morris

  from A List Apart

  CSS design hacks tutorial howto

• 15 Feb 08
  

  B. M. Whealton

  web design CSS and layout

• 09 Feb 08
  

  Patricia Rees

  float CSS faux.columns tutorial

• 08 Feb 08
  

  matt ou

  columns fill CSS Faux

• 28 Jan 08
  

  Tina C

  Bookmarks webdesign css layout tutorial

• 25 Jan 08
  

  alfred westerveld

  background columns css stretch vertical webdesign

  • How do you get the right column’s background color to extend all the way down the page?
  • Vertical stretch
• 04 Jan 08
  

  denise r

  vertical strech

  css layout webdesign design columns tutorial web tutorials tricks reference HowTo layouts verticalstrech

• 22 Dec 07
  

  Jennifer Culp

  css webdesign design tutorial web delicious

• 22 Nov 07
  

  aj

  css reference tutorial

• 06 Nov 07
  

  CSS webdesign

• 04 Nov 07
  

  Lev Iljuschin

  css webdesign tutorial

Page Comments

• 
  Yuriy Piskun on 2006-04-27
  The embarassingly simple secret is to use a vertically tiled background image to create the illusion of colored columns. For SimpleBits, my background image looks something like Figure 2 (proportions changed for demonstration), with a decorative stripey t
• 
  Yuriy Piskun on 2006-04-27
  The embarassingly simple secret is to use a vertically tiled background image to create the illusion of colored columns. For SimpleBits, my background image looks something like Figure 2 (proportions changed for demonstration), with a decorative stripey t
• 
  Martin Kelley on 2006-10-28
  uses background image to simulate columns

Would you like to comment?

Join Diigo for a free account, or sign in if you are already a member.