Meta tags:
description=In 2006 I wrote an article about simulating Frames and Iframes and from time to time, I get questions of how to make modifications to the templates...;

Headings (most frequently used words):

by, emil, stenström, position, fixed, css, templates, buddy, fixes, for, ie6, comments, patric, jansson, cody, jeff, seager, gypsy, jane, sheena, rai, mac, johan, gin, karol, 10, robert, test, 11, 12, martin, 13, nicolas, chevallier, 14, 15, 16, 17, websitedevelopmentdeveloper, 18,

Text of the page (most frequently used words):
the (58), fixed (21), 2010 (17), and (16), for (14), ie6 (13), this (12), with (11), but (10), css (9), right (9), #templates (8), frame (8), scrolling (8), page (8), when (7), top (7), you (7), works (7), position (7), that (6), emil (6), frames (6), have (6), see (5), thanks (5), can (5), about (5), navigation (5), left (5), will (5), what (5), not (5), just (5), doesn (5), work (5), safari (5), should (5), more (5), users (4), jan (4), your (4), stenström (4), how (4), header (4), same (4), use (4), using (4), fine (4), mac (4), chrome (4), instead (4), parts (4), useful (3), good (3), won (3), site (3), buddy (3), link (3), nov (3), important (3), stuff (3), main (3), grid (3), make (3), one (3), test (3), idea (3), style (3), may (3), iphone (3), simple (3), friendly (3), design (3), demo (3), still (3), information (2), very (2), broken (2), would (2), auto (2), deal (2), like (2), bottom (2), fit (2), keep (2), run (2), area (2), tried (2), find (2), interesting (2), has (2), perfect (2), robert (2), why (2), server (2), aug (2), code (2), does (2), content (2), scrolls (2), here (2), fix (2), hack (2), also (2), since (2), are (2), matter (2), tested (2), johan (2), gin (2), support (2), all (2), everywhere (2), back (2), gypsy (2), mar (2), nice (2), iframes (2), makes (2), comments (2), these (2), some (2), don (2), thing (2), get (2), absolute (2), things (2), column (2), article (2), simulating (2), 2006 (2), time (2), bit (2), jump (2), shared, worth, knowing, its, able, prove, breakthrough, indeed, websitedevelopmentdeveloper, 2011, looking, forward, keeping, updated, solved, width, parent, container, post, somewhere, provide, cross, browser, issues, articles, descriptions, dealing, however, generally, pretty, basic, something, full, length, two, vertical, footer, middle, each, adjustable, slide, out, expanded, contracted, entire, together, seem, within, bounds, wants, off, side, screen, distance, banner, everything, way, positioning, upper, which, needs, overflow, set, was, hoping, example, web, luck, completely, disappeared, demos, think, 90s, flashy, colors, form, nostalgia, nicolas, chevallier, oct, martin, sep, happen, looked, net, tab, firefox, extension, firebug, maybe, sheets, hardcoded, converted, convert, external, sheet, merely, local, computer, sense, over, any, http, www, testfamilygenealogy, com, narratives, early, fryburg, html, apply, declaration, true, validate, websites, validators, shouldn, much, _background, red, karol, again, deliberately, did, add, minimum, dying, soon, anyways, such, shame, even, though, falls, nicely, including, anyway, fixing, apr, version, examples, cool, etc, sheena, rai, too, jane, feb, beautifully, jeff, seager, reminds, old, school, accessible, search, engine, cody, patric, jansson, hope, said, designs, act, being, whole, they, another, number, goes, towards, zero, consistent, fallback, gets, probably, conditional, fixes, course, free, without, commercially, consider, public, domain, been, ie8, ie7, note, below, opera, windows, let, know, browsers, bugs, try, resizing, trick, well, exactly, want, stays, scrolled, really, making, sure, overlap, specifying, scroll, easier, several, layout, allows, cannot, specify, stay, yesterday, brandon, cobb, asked, thought, renew, take, original, background, recommend, reading, super, fighter, team, wrote, from, questions, modifications, presented, big, changed, longer, mandatory, dec, 2009, feed, contact,

Text of the page (random words):
position fixed css templates friendly bit jump to content or jump to navigation friendly bit contact feed position fixed css templates dec 31 2009 emil stenström css in 2006 i wrote an article about simulating frames and iframes and from time to time i get questions of how to make modifications to the templates presented but one big thing has changed since 2006 perfect support for ie6 is no longer mandatory so yesterday when brandon cobb of super fighter team asked about a design with a fixed header fixed left column and scrolling right column i thought i d renew my take on simulating frames with css the original article is still good for background information so i still recommend reading it position fixed css templates the idea is this instead of specifying what parts of the page should scroll we can specify what parts should stay fixed when scrolling this makes it easier to deal with several fixed parts of the same layout but also allows us do to things frames cannot do so what s the trick well position fixed does exactly what we want it works just like position absolute but it stays still when the page is scrolled so it s really just a matter of making sure things don t overlap demo fixed top fixed left scrolling right demo fixed top scrolling bottom demo fixed left scrolling right try resizing the page and see how the scrolling works the templates have been tested in fx 3 5 ie8 ie7 ie6 see note below opera 10 safari 4 all on windows let me know if you can test it on more browsers or find bugs you re of course free to use this templates as you see fit with or without a link back commercially or not consider it public domain fixes for ie6 as i ve said these designs don t act the same in ie6 instead of some parts being fixed the whole page scrolls in ie6 the good thing about this is that ie6 users won t see that your site is broken they will just get another design and as the number of ie6 users goes towards zero your design will be more and more consistent the fallback is very simple ie6 gets position absolute instead of fixed using the important hack you should probably use conditional comments instead hope these templates are useful for some of you comments jan 1 2010 by patric jansson 1 simple and useful jan 9 2010 by cody 2 this reminds me of old school iframes but using css makes it more accessible and more search engine friendly jan 11 2010 by jeff seager 3 beautifully simple emil as it should be feb 20 2010 by gypsy jane 4 works on chrome too thanks mar 24 2010 by sheena rai 5 nice examples cool stuff works on chrome safari ie etc nice work mar 26 2010 by mac 6 gypsy it doesn t work on my version of chrome on the mac apr 8 2010 by johan 7 interesting stuff about fixing it in ie6 may 13 2010 by gin 8 it doesn t work on safari for iphone may 14 2010 by emil stenström 9 mac i just tested it again for me it works fine of chrome on the mac johan i deliberately did not add a fix for ie6 to keep the code to a minimum ie6 is dying soon anyways gin same here such a shame doesn t safari for iphone support position fixed to all even though it doesn t work everywhere it falls back nicely everywhere i ve tried including safari for iphone so you should be fine using it anyway may 25 2010 by karol 10 why use important hack when ie will also apply _background red declaration true the css won t validate but since websites are for users not for validators this shouldn t matter that much aug 25 2010 by robert test 11 thanks for the css code on this i just converted a page using frames to this style the page works fine but when i convert it to an external style sheet it works fine on the server but it doesn t work when i run it merely on the local computer does this make sense the content page scrolls over the top of the header here s the page http www testfamilygenealogy com narratives early fryburg html any idea how to fix it thanks aug 28 2010 by emil stenström 12 robert test i have no idea why that would happen have you looked at the net tab in the firefox extension firebug maybe one of your style sheets is hardcoded to be on the server sep 2 2010 by martin 13 perfect oct 14 2010 by nicolas chevallier 14 interesting but i will not use it as ie6 has not completely disappeared the demos make one think of the 90s with flashy colors and frames it is a form of nostalgia nov 5 2010 by buddy 15 emil thanks for the articles and the important descriptions of dealing with ie 6 however this is generally pretty basic stuff how about something like a full length header with a fixed navigation on the left and two vertical frames on the right with a fixed header and footer on the top frame with a scrolling frame in the middle and each frame adjustable so that the navigation will slide in or out of site and the top or bottom frame of the right main frame can be expanded contracted to fit the entire main frame this is what i have together with a scrolling grid in the top right frame but i can t seem to keep the grid within bounds it wants to run off the side of the screen on the right the same distance of the left navigation area top banner is fixed navigation is fixed right main frame is fixed i have tried everything in the way of positioning on the grid area upper right which needs to have overflow set to auto i was hoping to find an example on the web but no luck nov 5 2010 by buddy 16 solved width auto on the parent container 0 i ll post this somewhere and provide a link when or if i can deal with cross browser issues nov 5 2010 by emil stenström 17 buddy looking forward to your link thanks for keeping us updated jan 20 2011 by websitedevelopmentdeveloper 18 the information shared on ie6 is very useful and worth knowing its good that the users won t be able to see the broken site the fixed css templates would prove a breakthrough indeed