Faux Columns

by
Published in CSS, Layout & Grids
A note from the editors: While excellent for its time, this article may not reflect modern best practices.

One of the questions I get asked the most often regarding my personal site’s design is the following:

Article Continues Below
Article Continues Below

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 already be familiar with.  But for those who aren’t, the following technique can be a handy little trick.

Vertical stretch#section2

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.

This becomes an interesting dilemma 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.

figure 1
Figure 1

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.

The cheat#section3

The embarrassingly 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 stripy 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: background image for vertical tiling
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.

The CSS#section4

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.

Positioned columns#section5

With the background image in place, my positioned layout sits on top, with padding and margins set for the left and right columns, ensuring that they will line up in the right place — within the faux columns created by the background image (see Figure 3).

figure 3
Figure 3>

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.

Whatever floats your boat#section6

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.

End notes#section7

It’s a simple concept, but one that may alleviate one of the frustrations that designers frequently encounter when building CSS-based layouts.

(Thanks to Jeffrey Zeldman for help in refining this article.)

About the Author

Dan Cederholm

Dan Cederholm is a designer, author, and speaker living in Salem, Massachusetts. He’s the Co-Founder of Dribbble, a community for designers, and Founder of SimpleBits, a tiny design studio. A long-time advocate of standards-based web design, Dan has worked with YouTube, Microsoft, Google, MTV, ESPN and others. He’s written several popular books about web design, and received a TechFellow award in early 2012. He’s currently an aspiring clawhammer banjoist and occasionally wears a baseball cap.

83 Reader Comments

  2. I just wanted to say that as a technique this has worked very well for me and I don’t really see it as a hack. In fact, it could be a good way around some nasty CSS hacks.

    I also wanted to compliment you on a very clear and easy to follow article Dan.

  3. As far as I understand this trick, it depends on the column content staying a fixed width (in pixels). Most of the time the content will be text, and as different fonts and font sizes will be used in display (you can’t control it!), such a design might break or become inaccessible for some users.

    Column widths should preferrabley be defined in percentages or “em”s, if the content is text.

  4. Bertilo, funny you should mention that. See this week’s other fine article, ELASTIC DESIGN by Patrick Griffiths, for ems-based layout techniques.

    Dan, as I mentioned, I get asked how to do this at least twice a day, and never have time to respond. Now I can simply point to your article. Thanks a mil!

  5. Good description of the technique, Dan. It’s worth noting for Bertilo and other’s sake that the technique, with a little fore-thought, can be easily applied to liquid layouts as well.

    One needs simply slice the background image into a smaller chunk (specifically, only the background for the coloured column that should tile). Applying this as a background image to a container element (body works, but it’s generally more effective to use a special div) will allow the same net result, without limiting the other column to a fixed-width.

    Yes, even this way the coloured column is limited to fixed-width. If you wish the repeating column to be flexible as well, time to consider a transitional layout using a table.

  7. There are many ways to do this, some, like the old ALA CSS layout, used a body background colour that was the same colour as the short column. When the short column ended, the colour continued on, as the body background colour was showing through.

    The “main” column/div had a different colour, and was guaranteed to be longer than the “menu” column, thus never showing the body background colour.

    I’ve used that method on several sites, and it allows for a more elastic design

  8. I think the things start getting trickier if you want three columns. Especially if you want them to be fluid, with a full-width footer at the bottom.

    A while back, I had created an example for doing this. The left and right columns were floated. This was required as I didn’t know a-priori which coulmn will be the tallest.

    The idea I used for “div stretching” was to wrap the contents within a div. For the wrapping div, I used a background y-repeating image to “stretch” the left column (just like Dan explained) and gave a background color to “stretch” the right column. I then gave the central div a background color.

    To ensure that all the three columns “stretch” to the length of the tallest column, I inserted a “clearing” div at the bottom of the central div. The “clearing” div is just an empty div, styled as “clear: both” to ensure that the central column stretches to the fullest and that there is no peek-a-boo for the background of the wrapper.

    You can look up the example at
    http://www.prism.gatech.edu/~gte207x/examples/pyro.html

    [The example above is “minimalistic”.]

  9. I remember using this technique back in 1997 in html 3.0 to make a left column. I am sure everyone remembers those websites, the “paper torn edge” columns or wood texture columns. After learning different ways to do achiever columns in HTML I never thought I would need to return to it again until xhtml/css layouts came along. Anyways, great article on this technique. I noticed that is how ESPN.com creates their columns.

  11. Yet another approach, which I take a perverse glee in suggesting, is to emulate table behavior through your CSS.

    What I mean is this: put nice, structural markup in your HTML the way Zeldman intended. In your CSS, style gross page elements to behave as table cells and the like.

    Here’s a straw-man example. It requires a little markup that I would say is truly extraneous, but not much.

    http://www.crossroads.net/misc/tabletest.html

  12. I don’t understand how anyone can be so determined to use CSS positioning when it requires tricks or messy hacks just to accomplish something that can be done trivially with a table. Sure tables have their share of hacks and accessibility issues, but at least I don’t need bleepin’ javascript just to place a footer.

    Didn’t anyone involved with the CSS2 spec think about these kind of design issues before they began pushing it out the door and telling everyone table layouts are now officially evil? W3C’s own site can’t even make their columns equal in length for crying out loud, they should’ve been the first to know something was wrong.

  13. Don’t forget to consider rendering speed when using backgroud images.

    If you tile a 1×1 image then the user’s CPU has to do a fair bit of work to draw the screen and can slow things down considerably.

    Find a good trade off between download size and rendering speed.

  14. Isn’t it funny that people will go through these hoops for no other reason than to avoid using tables?

    This a really bad trend: ALA has become the “HACK PALACE”. every article is about mastering some “hack”!

    Don’t get me wrong: I love the place and faithfully read every “hack tutorial”; I value the fact that I’m given free access to the information (many times great information/great articles). I’m not indicting ALA. I’m just pointing to the sad state of affairs when so many brilliant minds are wasted on coming up with…hacks!

    Long live CSS-H!

  16. People who think using this kind of techniques are hacks should take a look at the code they produced three years ago…

    I really like the example of Adam Rice, which seems to degrade quite well in Internet Explorer. We can’t use it, but maybe someone comes up with a clever HTC 🙂

  17. Steve wrote:
    >>>I don’t understand how anyone can be so determined to use CSS positioning when it requires tricks or messy hacks just to accomplish something that can be done trivially with a table.<<< Because of the separation of content and presentation (SCAP), with all its benefits. Using "tricks or messy hacks" today, using perfectly sane CSS 3 tomorrow - the markup can stay the same. (Not that it always does, but that's a different story.) And - of course - for LEARNING. If CSS isn't pushed to its limits, how are we supposed to see what needs improving? Steve wrote: >>>Didn’t anyone involved with the CSS2 spec think about these kind of design issues before they began pushing it out the door and telling everyone table layouts are now officially evil?<<< What makes you think that the people who created CSS 2 are the same people who said table layouts are evil? If the web design community had been as involved with CSS around 1996-98 as it is today, maybe these issues WOULD have been thought about and fixed. (Of course, that would have required the browsers of the time to actually implement CSS properly.) irvin wrote: >>>Isn’t it funny that people will go through these hoops for no other reason than to avoid using tables?<<< If that was true, yes. But avoiding tables (for layout!) isn't the purpose in itself. Avoiding table layouts is just a necessary step if you want to SCAP.

  18. Anne:
    >People who think using this kind of
    >techniques are hacks should take a look at
    >the code they produced three years ago…

    You mean like this?

    </p> <table class="layout"> <tr> <td class="column1"></td> <td class="column2"></td> <td class="column3"></td> <td class="column4"></td> </tr> </table> <p>

    Oh the humanity!

    I’m not suggesting CSS for layouts is a bad idea, I’m saying the W3C has failed to come up with a way to layout designs in CSS that is better than using tables. Maybe if these CSS cheerleaders out there weren’t so busy promoting their own CSS books or splashing XHTML and CSS W3C validator referrers across their webpage like a hip corporate logo they could be asking the tough questions like “Why can’t CSS do everything tables can?”

  19. Perhaps this isn’t really the place to debate this, but I think it’s a known fact that people who have used table-based designs on their websites have made a mess out of their markup. Table-based designs can’t possibly use semantic, flowing markup in a way that can be easily understood in non-visual ways.

    Of course there’s the Zeldman method of using part tables, part CSS, which is a great transitional way to design. But we’re moving forward. We have the techniques and technology available for CSS-based layouts to work now, why not use them? Tables are made for tabular data. It’s probably time for us all to realize that and stick to it.

    Back to the article, it’s a great one and one of the basics that belongs here at ALA. Used the technique myself before and it works great:

    http://www.breathingfire.com/farwelllake

    (Had to stick a couple of header and footer images in to cap of the top and bottom of the page, though)

  20. >If you tile a 1×1 image then the user’s CPU…
    Taking 1×1000 should make things easier for the CPU, as in most cases only horizontal tiling would be needed.

    My imaging software gives me 43 bytes for a 1×1 gif, 71 for a 1×1000, so both download time and rendering speed should be acceptable.

    With polychrome bgs it’s different, of course.

    BTW:
    applying the tiled bg img to the body seems quite inflexible, it should be applied to a div without fixed height, containing the columns.

    Thus, the longest column’s height determines the bg’s height, like a table’s column would.
    …as can be seen at http://www.bauwohnberatung.de/, using it’s font menu. (bugs with mozilla/khtml text zoom are due to some other elements)

  21. “I’m saying the W3C has failed to come up with a way to layout designs in CSS that is better than using tables.”

    That’s not correct. The W3C has included CSS tables in CSS2. CSS tables work very well for such layout – in browsers that support them. Unfortunately most browsers don’t. But that’s hardly the fault of the W3C.

  22. Brad Bice:
    >But we’re moving forward. We have the
    >techniques and technology available for CSS-
    >based layouts to work now, why not use them?

    Because these “techniques” are nothing more than hacks and workarounds used in an attempt to overcome CSS’ limitations.

    Bertilo:
    >That’s not correct. The W3C has included CSS
    >tables in CSS2. CSS tables work very well
    >for such layout – in browsers that support
    >them. Unfortunately most browsers don’t. But
    >that’s hardly the fault of the W3C.

    W3C: Content developers should avoid using (tables) to lay out pages (“layout tables”). http://www.w3.org/TR/WCAG10/wai-pageauth.html#tech-avoid-table-for-layout

  23. There really isn’t an argument here. Proper markup will lead to proper styling using CSS. See: http://www.csszengarden.com

    Sure, some “hacks” are used, but can’t slicing up images and sticking them into table cells be called a hack? Shouldn’t using tables for design layouts be called a hack, since it is using tables for methods other than what they were originally for?

    Bottom line is CSS is made for style/display/visual effects. Tables are made for data. There’s no reason today’s websites can’t be created to take advantage of both and leave the table layouts of the past behind us.

    I don’t see this article’s technique as a hack. If you look at it as a hack, ok, that’s you. But why be negative about it, and just look at it as it is. It’s a great way to develop great looking designs.

  24. I had been using a outer div with the background color of my left column, then absolutely positioning a content column with a different color background and a left margin.

    This is a good alternative and is very simple.

  25. steve:
    > W3C: Content developers should avoid using
    > (tables) to lay out pages (“layout tables”).

    I don’t think you get the difference. Styling divs AS tables keeps you content structured, but you can style using a table layout. Using tables to create a layout is a BAD thing, since your content isn’t structured anymore.

  26. “Yet another approach, which I take a perverse glee in suggesting, is to emulate table behavior through your CSS.”

    With all due respect, table behavior is not being emulated here. The table tag was hijacked to create layouts, something for which this tag was not intended (wrong tool for the job, but it gets it done; is this not a hack?).

    Take a step back and realize that this approach is being used for presentation, to acheive a layout, *not to emulate anything*, but rather to acheive a goal (layout or presentation) that once was done with tables (wrong tool) and now is being done with css (right tool).

    One of the goals of css was to separate presentation from structure. Dan’s column presents a method in which presentation is separate from markup. I see no hacking here, but rather the proper use of a tool to do the job it was intended to do.

  27. Thanks Dan, I was looking for a such method for a while, and finally I invent it by myself. Indeed my own blog http://www.cafefort.com uses the same technique but have a very little problem, even using the Tantek hack, i must decrease my width by 2px to keep the design presentable. Now it works fine 🙂 I’m so proud 😉

  28. Anne:
    >I don’t think you get the difference.
    >Styling divs AS tables keeps you content
    >structured, but you can style using a table
    >layout.

    I don’t think you get my point. I have no problem with a tabular design, I’m saying CSS is inferior to

    ‘s as a layout tool, and that shouldn’t be the case.

  29. I had a little problem with this technique that took me quite some time to solve.

    My site is divided into two columns, much like http://www.alistapart.com, but the background was a little off centre with respect to the content.

    The solution was to make the width of the two columns together an even number.

    I just thought I’d share this in case anyone else was having the same problem.

  30. Mike: I don’t want to quibble over semantics, but if you look at the CSS I wrote in my sample page, you will see that it does emulate table formatting: DIVs and Ps are styled as “display: table-row” or “display: table-cell”. I think it is fair to say that is emulating table behavior.

    Steve: how are clever CSS techniques “hacky” but using table tags (which were intended as a way to mark up spreadsheets and the like) to lay out web pages is not? CSS is not inferior to table-tagged layout–indeed, as my example shows, it encompasses that exact style of layout without ever putting a structurally irrelevant table tag in your HTML. Plus a lot of other types of layout that would be difficult or impossible to achieve using table tags.

  32. Adam, sorry – you’re right, I totally misread your comment, and dare I say, was browsing in ie 5 when I visited your page and thus didn’t see the intended layout (reading and browising prior to caffeine intake; my bad).

  34. Great article 🙂 and a good reference to point people to indeed. I’ve been using this for quite a while now, and the layout always turns out as intended. However, you could have added a short remark about the danger of using height:100%; (when content exceeds window height), without an additional min-height and height:auto; fix (behind a > selector) for decent browsers.

    It’s also a matter of thinking different when writing your markup and dividing your design into different sections. With tables it used to be almost unavoidable to use a lot of height=”100%”s to force and stretch all the cells into their intended position. With CSS based design, often a few well placed backgrounds (as discribed in the article) suffice, and defining height on content elements is not needed at all.

    This compulsive notion of defining heights on everything – and widths too for that matter – is kind of disturbing 😉 with the concept of CSS and the way “flow” works. It becomes so much easier when you let go of that need to control everything, and let CSS do what it’s good at.

  35. This isn’t intended as a critisism to the author, but it does remind me of the HTML table layout tricks that CSS is meant to overcome.

    I mean CSS in my opinion SHOULD simply allow you to specify a 100% height for a DIV and have it stretch accordingly, to 100% of the used vertical space.
    As I said I dont hold the author responsible for this trick being required, I just feel a little let down by CSS when such a simple concept requires any trick at all.
    We are not free of browsers, quirks, bugs and ineffeciencies CSS just gets us closer.

  36. I use this trick when making sites. It really works. But I still can be shure about one thing – what better to use – CSS or Tables for positioning of the web-page elements. I still use tables – thinking it is more usefull for all browsers and SE.

    Peter Bacon
    http://www.watch-replica.net

  37. Why do you waste most of my screen? I’m only running 1600×1200 but I have a small column down the middle that is your site.
    the button sais say it.

    {“Hairy” Smith’s post is off-topic, and his question has been answered on ALA’s Q&A page, starting with question #21 – Editor.}

    http://www.alistapart.com/qa/#question21

  38. Great article, but I have a question. What scale image do you use. I have been racking my brain for hours trying to figure this out without success. Say I want my page white area 760px wide. How wide for the white in image? How wide total?

  39. You just beat me to it, I was about to publish an article on this very topic. Glad to see it here though because it is a perfect use for CSS. The content of the web page should have nothing to do with coloring columns. Turning off CSS gives a page that is strictly content oriented and that I really like.

  41. > If you tile a 1×1 image then the user’s CPU…
    > Taking 1×1000 should make things easier for the CPU…

    To avoid problems with rendering speed in some browsers, and especially on slower CPU:s, don’t make tiled background images just 1 px in either dimension. When using an image in the way described in this article, make it 10 or 20 pixels tall. Image size won’t increase by much, but it will be much easier for slow CPU:s to handle.

  42. You can do it without fixed with. You can even do it without images at all.

    The solution is pretty simple. I’m using it for my own site (amonre.bedesign.be). Put your body stuff into a

    which has the “bottom: 0px” attribute. Put your sidebar into a

    which is inside this content

    . Make this one “bottom: 0px” as well. Then you can add colours, borders, etc.

    It doesn’t work Internet Explorer, apparently, but that is not my fault. 🙂

  43. I agree that using CSS itself to achieve a columnar layout is not a hack. However, jumping through various coding hoops to make it work consistently across browsers or accomodate different content lengths or text sizes is a hack.

    Using table code to achieve a columnar layout is a hack, but it is one that works reasonably well across different browsers, content lenths, and font sizes without additional code tricks.

    BTW, AFAIK IE/Win does not recognize display: table and it’s children. At best, IE ignores display: table, and at worst produces an error if I try to set it via JavaScript.

  44. My problem is that the text in the right menu (2 column design, main content in left column) is sometimes longer than that in the main column. The text then wraps to the left – so it doesn’t matter what the backgound is doing in this case.
    Can anyone help?

  45. Nice article.

    i myself was using this particular idea (not as refined) before the release of this article! its such a good idea. Well done!

  46. Set a left margin for your right column. This is if your left column is floated and your right column is not floated.

    margin-left: the width of your left column plus a little padding.

  47. Can you set the height of columns? Say to “100%”– might make things easier. This technique works fine with divs.

  50. If you have a background that is supposed to line up with the content being displayed on top of it, you may have a problem if the width of your content area is not an even number of pixels.

    Mozilla and Opera will nudge the content a pixel to the left if the browser space is of an even width, and the content space is of an odd width.

    If you don’t care for your IE audience you can just set padding-right to 1px on the body element, but as IE is a crucial part of the market I’ve come up with a little bit of JavaScript that will check the user browser, and the browser width, and adjust the padding where neccessary.

    function paddingAdjustment() {
    /* Make sure we are not affecting IE */
    agent = navigator.userAgent.toLowerCase();

    if (!checkIt(‘msie’)) {
    /* Determine browser width */
    var browserWidth = document.body.offsetWidth;

    /*
    Pad the right of the body by one pixel
    in non IE browsers to account for the may
    they handle centering.
    */
    if (browserWidth % 2 == 1) {
    document.body.style.marginRight “1px”;
    }
    }
    }

    /* Borrowed from Quirksmode */
    function checkIt(string) {
    place = agent.indexOf(string) + 1;
    return place;
    }

    Hope this is of some help.

  51. When I was tearing my hair out trying to get my blog to centre and stretch, I came across this method used by some guy over at css garden.

    But I didn’t know how to make it fluid and ended up using the “clear” method instead. But this is much simpler. Thanks!

  52. I’m designing a page where I have a footer image that finishes off the page nicely that I would like displayed at the aboslute bottom of the page every time. So naturally I just use that footer image as the body background with a specification of “no-repeat bottom center”.

    However, I have a 2-column content area that I want to stretch all the way down the page to meet the footer image regardless of the amount of content, but I’m already using that footer image as my body background, and obviously I don’t want that image tiled. Everything else I’ve tried seems dependant on the amount of content the div has.

    Is my only option to make an extremely tall background image (i.e. 4000+ px)?

  53. with this doctype:

    I was able to get a div to span(height) as far as I wanted to.

    If you specify a size in EM, and the content is larger than the given area in IE, the area will increase to fit the content…

    If you specify a size in %, and the content is larger than the given area in Moz, the area will increase to fit the content…

    so use the IE hack, to show IE ems, and Moz %s

  54. I tried this when I was redoing my site, but the whole thing fell apart when I tried put an image in the larger of the two divs. From what I’ve read, this appears to be a bug in the way the CSS is rendered. I’d love to be told I’m wrong about this – would your method work if you wanted to put an image in the top of the left column below the menu bar in this layout?

  55. On my site, I have fixed with columns (one on each side of the screen) and the middle column varies depending on how much space is left.

    What would I have to do to get it to work? You can check out my site (in IE, that’s where the problem is) at http://www.tim-weston.com/books/

  56. After first reading this I made an attempt at doing two columns with background colors that carry the full height.

    http://webhost.bridgew.edu/etribou/layouts/2col_colors_01/

    A little messy, but the idea is to create a fixed background block the width and height of the window and create a sort of color mask within that fixed background. Then place your content over it. This is done with z-indexing and fixed positioning. For IE, I use the fixed-positioning hack discussed at http://devnull.tagsoup.com/fixed/ .

    Haven’t tested it on Mac platform yet.

    Full-width footer doesn’t really work on this layout unless the content is taller than the user’s screen.

  57. With my site I am trying to “center” things at 25%. I am having quite a bit of fun trying to do this too. I have the same problem as others as my global div seems to be off a pixel on even window sizes. Am I just shooting myself in the foot trying to make this work? Making things even helped a lot but it is still not perfect.

  59. Can someone take a look at my layout for http://www.poker-resource.com? I have am using the faux columns trick, but right now the site is fixed with and I want it to be elastic. Trouble is I can wrap my head around how its possible to make liquid faux column layouts.

    If you can figure out how to do it with my site, please email me at wdami@stevens.edu with xhtml/css code if possible. Thanks alot!

  60. Ok, great idea, very cool. So, now as a CSS newbie in this realm of CSS, how do I put my 2-columns of text onto the page? I’m using a 700px wide background with a 500 px left, and a 200px right.

    I don’t know what clear, float, etc. etc. means (yet),and it would be nice to have a followup article (or maybe someone here can give me an example) on how to do this, for those of us that learn by doing rather than reading.

    Thanks!

  61. Here’s the xhtml:

    …content stuff

    And then, the CSS

    #wrapper {
    background: url(yourbgimage.gif) transparent repeat-y;
    width: 700px;
    }

    #menu {
    float: right;
    width: 190px;
    }

    #content {
    margin-right: 200px;
    }

    That’s very basic, but you should get the idea. 🙂

    Good luck.

  62. I’ll give it a whirl. I went ahead and created a table 700 px wide, centered, with one column at 500px and the oterh at 200px. It work’d. But that’s old school and I want to learn something new.

  63. It didn’t work. My #menu, which I called #left (for my sake) is centered. Isn’t the #right supposed to be marked absolute?

    I feel pretty grim at the moment that I can visualize this…

  64. I’m a dope. I think it actually worked. Will play with it further. I had #right labeled instead of #menu as in your example.

    Thanks!

  65. So, now when I add content to the #content div, the #menu top lines up with the #content bottom, in other words, it’s getting pushed down by the #content.

  68. I done this trick about 1 year ago when I made my personal website Dance Devils. I never thought it would end up as an article here though or I would have written the article.

  69. Does this only work in the body tag? I cannot get it to work in a div to save my life. Is there something special I need to do?

  70. This sounds similar to a problem I’m having on my site. Visit this page:

    http://www.rpgnext.com/tutorials.php

    The left and right columns are fixed and the center one is fluid. When you scroll down, you’ll notice that the background colors on the fixed columns ceases while the content continues. The css is available here:

    http://www.rpgnext.com/main.css

    Notice that both the #leftside and #rightside divs have “height: 100% ;”. I’m guessing that the 100% only referes to the initial browser window size. How can I get these to expand with the content ?

  72. You CAN in fact just specify ‘height: 100%;’ for just about anything, you just have to make the containing element have a height of 100% also.

    Try the following:

    html {height: 100%;}
    body {height: 100%;}
    #whatever {height: 100%;}

    Most people don’t seem to know about the ‘html’.

  73. I was just about to point out that height: 100% is depreciated and no longer works.

    I tested it, by creating a div:
    #tallbox{height: 100%;background-color: #000; width:40px;}

    it was invisible.
    so i added html,body{height:100%} to the style sheet, and it looked like it was working. I had a black 40px wide line going down the browser window.

    But when i filled the div with content that extended further than the initial window size, i found that the div did not continue. It was 100% of the initial view-point, not 100% as in all-the-way-to-the-bottom. In firefox (:. netscape also) that is, and Opera.

    IE displays it as expected, all the way to the bottom, no matter how much lipsum you throw into the div. This annoys me – the browser that usualy throws up several hurdles a day finaly does something as expected…

  74. I don’t know about anyone else, but this article by Dan has really ‘saved the day’ for me. I was redesigning my own site and I desperately wanted to know how I could create this ‘effect’.

    I guess I had to wait no more. Dan’s article came just in time for me to put into practice what he wrote. I created a very simple background image and that did the trick.

    So far, I only had problems with Opera 6.0 for the Mac, but other than that, all of the mainstream browsers like IE 5.x, IE 6.0 for the Mac and for the Windows platform, Safari and all Gecko-based browsers do display it properly.

    Good job Dan!

  76. I’m sorry to say, but if your going to put any effort into making a tutotial, then at the bit which people will actually care about (Where you say about positioning the layers on top of the background) I don’t know if you could be any less clear. You just blab about, oh using margins and padding, here’s someone else’s useless tutorial about how do do this, and I’m not even going to tell you what part of the tutorial to look at. I suggest you be a bit more clear, because it the moment it’s useless, and very annoying, please redo it.

  77. I am in the process of going table-less, but curretnly it’s too much of a hurdle, so I’m going from inside out. Turning as many nested tables at a time into DIVs before I mess with the big one.

    I’ve got a repeating element going down the right side of the page. It’s a two column element with a 65px square image to the left and to the right, a title and a description followed by a link. you can check it out at calabashmusic.com (it’s a little f*d up at the moment thanks to my obsession with CSS).

    I want it to just not wrap around the image, so that it looks like:

    ———————-

    —— Title
    |IMG | textexttext
    | | text text
    —— tesxt text
    text text
    text text
    LINK

    unfortunately, the amount of text is dynamic, so if I set the image div to a fixed height, it will work, most of the time. Unless there is not much text. Otherwise it wraps around the image. Here is my code:

    #rightListItem {

    }
    #rightListItem .imgLayer{
    margin-left:4px;
    margin-right:8px;
    margin-bottom:25px;
    voice-family: “”}””;
    voice-family:inherit;
    width:63px;
    background: url(“/img/1pix.gif”) repeat-y: 50% 0;
    float:left;

    ————

    }
    #rightListItem {
    }
    #rightListItem .imgLayer img{
    height:63px; width:63px;
    }

  78. I am in the process of going table-less, but curretnly it’s too much of a hurdle, so I’m going from inside out. Turning as many nested tables at a time into DIVs before I mess with the big one.

    I’ve got a repeating element going down the right side of the page. It’s a two column element with a 65px square image to the left and to the right, a title and a description followed by a link. you can check it out at calabashmusic.com (it’s a little f*d up at the moment thanks to my obsession with CSS).

    I want it to just not wrap around the image, so that it looks like:

    ———————-

    —— Title
    |IMG | textexttext
    | | text text
    —— tesxt text
    text text
    text text
    LINK

    unfortunately, the amount of text is dynamic, so if I set the image div to a fixed height, it will work, most of the time. Unless there is not much text. Otherwise it wraps around the image. Here is my code:

    #rightListItem {

    }
    #rightListItem .imgLayer{
    margin-left:4px;
    margin-right:8px;
    margin-bottom:25px;
    voice-family: “”}””;
    voice-family:inherit;
    width:63px;
    background: url(“/img/1pix.gif”) repeat-y: 50% 0;
    float:left;

    ————

    }
    #rightListItem {
    }
    #rightListItem .imgLayer img{
    height:63px; width:63px;
    }

  79. I am in the process of going table-less, but curretnly it’s too much of a hurdle, so I’m going from inside out. Turning as many nested tables at a time into DIVs before I mess with the big one.

    I’ve got a repeating element going down the right side of the page. It’s a two column element with a 65px square image to the left and to the right, a title and a description followed by a link. you can check it out at calabashmusic.com (it’s a little f*d up at the moment thanks to my obsession with CSS).

    I want it to just not wrap around the image, so that it looks like:

    ———————-

    —— Title
    |IMG | textexttext
    | | text text
    —— tesxt text
    text text
    text text
    LINK

    unfortunately, the amount of text is dynamic, so if I set the image div to a fixed height, it will work, most of the time. Unless there is not much text. Otherwise it wraps around the image. Here is my code:

    #rightListItem {

    }
    #rightListItem .imgLayer{
    margin-left:4px;
    margin-right:8px;
    margin-bottom:25px;
    voice-family: “”}””;
    voice-family:inherit;
    width:63px;
    background: url(“/img/1pix.gif”) repeat-y: 50% 0;
    float:left;

    ————

    }
    #rightListItem {
    }
    #rightListItem .imgLayer img{
    height:63px; width:63px;
    }

  80. Don’t set a height for the right div.
    Use this (thanks to PPK):
    var y;
    var test1 = document.body.scrollHeight;
    var test2 = document.body.offsetHeight
    if (test1 > test2)
    {

    y = document.body.scrollHeight;
    }
    else
    {

    y = document.body.offsetHeight;
    }

    document.getElementById(“navbar”).style.height=y;
    This way you don’t need images. I don’t like images in a design.

  82. Hope I can get a quick pointer about centering. I’m still slow to adapt to layers, and have been stuck on this for a few days. The faux columns article is helpful, but doesn’t mention much about how to get the content to line up properly with the BG. I’m getting close, but it never matches up properly unless I start using huge negative values in the poistioning properties that causes some unpredicyable behaviour across browsers.

    Can someone point me to a tutorial or give me a basic run down of how this is done? I have a BG image that’s 780px and two colored columns with borders that goes over the top, sorta like simple bits.

    thanks.

Got something to say?

We have turned off comments, but you can see what folks had to say before we did so.

More from ALA