CSS and iframes

In this post I'm going to show you how a fluid layout can actually help us with inserting our page contents into an iframe element without any scrollbars. To accomplish this task, we need a sample page that will be inserted in another page through the iframe element. This page contains only a basic wrapper with an heading and a paragraph but with the following styles:

body {

    margin: 0;
    padding: 0;
    font: small Arial, sans-serif;
    line-height: 1.4;

#container {

    width: 80%;
    margin: 0 auto;

By using percentages, we actually get an absolutely fluid layout that will fit any possible dimensions. Then we insert this page into another page using the iframe element:

<iframe src="css-iframes/sample.html" height="250" width="300"></iframe>

To remove the annoying border from this element we have to use a little bit of JavaScript to avoid any possible validation error (the frameBorder attribute is illegal in standard HTML):

window.onload = function() {

   var iframe = document.getElementsByTagName('iframe')[0];
   iframe.setAttribute('frameBorder', 0);

Then we can even apply our styles to the iframe:

iframe {
    display: block;
    border: thin solid gray;


Live test

This entry was posted in by Gabriele Romanato. Bookmark the permalink.

Leave a Reply

Note: Only a member of this blog may post a comment.