Faux Columns

by Dan Cederholm

83 Reader Comments

Back to the Article
  1. This is one of my favorite tricks. Nice to see it written up so I have a place to refer people to when they ask now.

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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!

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  6. Pixy posted this example of using background images in fluid layouts.

    http://www.pixy.cz/blogg/clanky/css-3col-layout/

    I have used this on occasion and it worked wonderfully.

    Copy & paste the code below to embed this comment.
  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

    Copy & paste the code below to embed this comment.
  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”.]

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  10. Nice and clean Dan, well done!

    For a fluid take on this method (and there are a lot!):
    http://www.positioniseverything.net/threecolbglong.html

    In a sense what Dave S. was getting at above.

    Copy & paste the code below to embed this comment.
  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

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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!

    Copy & paste the code below to embed this comment.
  15. Finally something that kills that awful Mozilla bug. Look at http://jstimes.vze.com in Firebird.

    Copy & paste the code below to embed this comment.
  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 :-)

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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?

    <xmp>
    <table class=“layout”><tr>
    <td class=“column1”></td>
    <td class=“column2”></td>
    <td class=“column3”></td>
    <td class=“column4”></td>
    </tr></table>
    </xmp>

    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?”

    Copy & paste the code below to embed this comment.
  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)

    Copy & paste the code below to embed this comment.
  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)

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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 ;)

    Copy & paste the code below to embed this comment.
  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 <table>‘s as a layout tool, and that shouldn’t be the case.

    Copy & paste the code below to embed this comment.
  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 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.

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  31. So simple and so effective, an excellent tip I will be sure to use!

    Copy & paste the code below to embed this comment.
  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).

    Copy & paste the code below to embed this comment.
  33. I just discovered this technique a few days before reading the article.  It was really nice to see it written up in such a clear, concise manner.

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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

    Copy & paste the code below to embed this comment.
  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

    Copy & paste the code below to embed this comment.
  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?

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  40. your solution is so simple it made me laugh out loud, css is simplicity at it’s best.
    thanks,

    bernard

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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 <div> which has the “bottom: 0px” attribute. Put your sidebar into a <div> which is inside this content <div>. 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. :)

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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?

    Copy & paste the code below to embed this comment.
  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!

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  47. Can you set the height of columns? Say to “100%”—might make things easier. This technique works fine with divs.

    Copy & paste the code below to embed this comment.
  48. Have just caught up with Peter’s comments on P.4 re setting height.

    Copy & paste the code below to embed this comment.
  49. Why not go liquid and get rid of your troubles? If it’s a constant-bottom you want, use percentages on the height.

    http://www-personal.usyd.edu.au/~ctillam/columntest/columns.html

    feedback needed
    badger@staff.usyd.edu.au

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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!

    Copy & paste the code below to embed this comment.
  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)?

    Copy & paste the code below to embed this comment.
  53. with this doctype:
    <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.1//EN”
    “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>

    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

    Copy & paste the code below to embed this comment.
  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?

    Copy & paste the code below to embed this comment.
  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/

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  58. Thanks for this article, it solved a problem I just had a few days ago.

    Copy & paste the code below to embed this comment.
  59. Can someone take a look at my layout for 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!

    Copy & paste the code below to embed this comment.
  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!

    Copy & paste the code below to embed this comment.
  61. Here’s the xhtml:

    <div id=“wrapper”>

    <div id=“menu”>
    ..add menu stuff
    </div>

    <div id=“content”>
    …content stuff
    </div>

    </div>

    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.

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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…

    Copy & paste the code below to embed this comment.
  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!

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  66. You had it backwards.  :)  Set the left side width, float it, then set right with a left margin of xxxx px.

    Cool beans!

    Copy & paste the code below to embed this comment.
  67. Sure did. Sorry. I didn’t try it before posting. Sorry. :)

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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?

    Copy & paste the code below to embed this comment.
  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 ?

    Copy & paste the code below to embed this comment.
  71. You guys should take a look att htis page.
    It has all the elements you require.

    http://www.redmelon.net/tstme/3cols2/

    Copy & paste the code below to embed this comment.
  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’.

    Copy & paste the code below to embed this comment.
  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…

     

    Copy & paste the code below to embed this comment.
  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!

    Copy & paste the code below to embed this comment.
  75. what is wrong with your tutorial!

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  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;


    ——————


    <hr>

    <div id=“rightListItem”>

    <div class=“imgLayer”>
    [url=”{LINK}“href = “{LINK}”>{IMG}</a>
    </div>
    <div >
    <a href = “{LINK}” class=“topten”>{NAME}</a>
    <div class=“body” > {DES} </div>
         
    <div class=“arrow blue”><span class =“getLink”><a ]
    GET IT![/url]</span>
    </div> 
     
    </div>

    </div>

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

     

    Copy & paste the code below to embed this comment.
  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;


    ——————


    <hr>

    <div id=“rightListItem”>

    <div class=“imgLayer”>
    [url=”{LINK}“href = “{LINK}”>{IMG}</a>
    </div>
    <div >
    <a href = “{LINK}” class=“topten”>{NAME}</a>
    <div class=“body” > {DES} </div>
         
    <div class=“arrow blue”><span class =“getLink”><a ]
    GET IT![/url]</span>
    </div> 
     
    </div>

    </div>

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

     

    Copy & paste the code below to embed this comment.
  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;


    ——————


    <hr>

    <div id=“rightListItem”>

    <div class=“imgLayer”>
    [url=”{LINK}“href = “{LINK}”>{IMG}</a>
    </div>
    <div >
    <a href = “{LINK}” class=“topten”>{NAME}</a>
    <div class=“body” > {DES} </div>
         
    <div class=“arrow blue”><span class =“getLink”><a ]
    GET IT![/url]</span>
    </div> 
     
    </div>

    </div>

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

     

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  81. Here is my Javascript solution. Not as stable as I thought but I like it: http://www.geocities.com/seanmhall2003/css3/fc.html

    Copy & paste the code below to embed this comment.
  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.

    Copy & paste the code below to embed this comment.
  83. Here is the file I’m talking about: http://www.ninemilestudio.com/test/

    You can see how the layers just don’t line up properly if you look at the borders of the BG image.

    Copy & paste the code below to embed this comment.