Beginner Web Tutorials

Using iFrame or “inline Frame” provides a convenient way of embedding pages from other websites to your own. It is preferred by most websites to use because of its ease in implementation unlike “Frame”. You can insert it anywhere on your website without worrying it might mess up with other elements. Just like other HTML elements, iFrames has its own simple tags. To place an iFrame to your site, the simple code below is good to go which consists of basic iFrame tag attributes:

<iframe src ="source.html" width="100%" height="300"></iframe>

You can add other attributes such as frameborder, name, scrolling, and more.

One simple issue in iFrame is the scrolling. Some might have had problem setting the vertical and horizontal scrolling of their iFrames. You can set the scrolling attribute of iFrame to either yes or no. The no simply disables the scrollbars while yes enables BOTH which is usually the issue. Of course it is much likely that we would want to enable the horizontal scroll bar and just disable the vertical or vice-versa.

We can make this feature possible using CSS. The following simple CSS codes below is all we need to solve the problem:

iframe {
overflow-x: hidden;
overflow-y: scroll;
}

The above code will hide your horizontal scroll bar and shows up the vertical. Simply add it to your CSS.