This link has been bookmarked by 52 people . It was first bookmarked on 31 Jul 2006, by Richard.
-
11 Feb 17
-
23 Oct 15
-
16 Jan 15
-
21 Jan 13
-
27 Dec 12
-
One of the somewhat frustrating properties of CSS is the fact that elements only stretch vertically as far as they need to. Meaning, if a 200-pixel tall image is contained within a
<div>, the<div>will only expand down the page 200 pixels. -
two equally tall columns when a unique background color is desired for each column
-
There are a few ways to make the columns appear equal in length, regardless of the content that they contain. I’m sharing my particular solution (for use with an absolutely positioned layout), which happens to be pretty darned ... simple. This same little trick is also used elsewhere, including this very site.
-
secret is to use a vertically tiled background image to create the illusion of colored columns
-
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
bodyelement: -
The
50% 0bit 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.
-
While I use absolute positioning to create a two-column layout on my own site, equally fine results can be achieved via the
floatproperty (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.
-
-
13 Dec 12
-
How do you get the right column’s background color to extend all the way down the page?
-
create a layout with two equally tall columns when a unique background color is desired for each column.
-
This same little trick is also used elsewhere, including this very site.
-
vertically tiled background image to create the illusion of colored columns.
-
my background image looks something like Figure 2
-
bodyelement: -
Essentially, we’re making the entire page’s background color grey and tiling it vertically only (
repeat-y). -
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
floatproperty (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.
-
-
12 Sep 12
-
01 Feb 12
-
05 Dec 11
-
02 Nov 11
-
16 Jul 11
-
26 Jun 11
-
13 Apr 11
-
13 Jan 11
-
20 Oct 10
-
13 Oct 10
-
24 May 07
-
23 Feb 07
-
20 Aug 06
-
07 Aug 06
-
21 Oct 05
-
11 Oct 05
-
15 Sep 05
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.