Simulate Frames with Pure CSS

September 12, 2007 | Tags for this entry: CSS

Here’s a CSS tip that may be new to you, depending on your time in the game. Originally presented at Barcamp Dallas

We’ve all used frames at some point in our deep, dark web design pasts. Then, when we got hip to how crummy frames can be, we graduated to iframes. That’s when we really knew that we had beaten the system.

Then, we realized that even the classy iframe had its flaws.

So, here is a standards-compliant CSS solution for that situation that you would normally solve with frames, minus the extra SEO-stifling orphaned pages.

Grab the HTML and CSS blocks below and paste them into an HTML file. These will be the basis of our demonstration.

HTML

<div id="frame">
<p>Lorperat. Ut loreet lobore euis ex eugait iliquis ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.</p>
<p>Duissi. Lorperat. Ut loreet lobore euis ex eugait iliquis ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.</p>
<p>Duissi. Lorperat. Ut loreet lobore euis ex eugait iliquis ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.</p>
<p>Duissi. Lorperat. Ut loreet euis ex eugait iliquis ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.</p>
<p>Duissi. Lorperat. Ut loreet lobore euis ex eugait iliquis ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.</p>
<p>Duissi. Lorperat. Ut loreet lobore euis ex eugait ametum iure magna consed ent ex esectet wismod magnibh erat, venibh eu faccumsan ulla accumsan henit wisis ea ametuer in henim velis autpatue ver iuscing eu facilla facin utat wisi ting exeraessim quisi bla faccum dit ipit ad magnit ad ming eugiatuer sumsan hent wis augait alit, si.</p>
</div>

CSS

#frame {
	background: #69C;
	border: solid 1px silver;
	width: 300px;
	padding: 5px;
}

When you preview your page after adding those code blocks, you will notice that we a box with long content inside of it. Now, let’s just assume that we want this content to fit in a space with a height of 250px. Add the following to your “#frame” CSS rule.

That rule should now look like this:

#frame {
	background: #69C;
	border: solid 1px silver;
	width: 300px;
	padding: 5px;
	height: 250px;
}

So now, we notice that our box is the proper height, but the content is spilling out of it. To fix this, we add overflow:auto; to our rule. So it now looks like this.

#frame {
	background: #69C;
	border: solid 1px silver;
	width: 300px;
	padding: 5px;
	height: 250px;
	overflow: auto;
}

Here is the finished example

So the next time you have a tight space that you want to fit long content into, you don’t have to resort to frames.