codescracker


css

CSS Create Frames



« Previous Tutorial Next Tutorial »


Frames refer to elements that are used to divide a Web page into separate parts or portions.

Dividing a Web page into frames enables you to display additional content or multiple documents in a single Web page.

Earlier, frames were created using the FRAME element provided by HTML; however, this method has now become absolute due to various reasons, such as problem in bookmarking the page or lack of proper support on Web browser.

CSS Create Frame Example

Nowadays, frames can be created using various properties of CSS, as shown in the following source code:

<html>
<head>
	<title>CSS Create Frame Example</title>
	<style>
	#frame { position:absolute; top:10px; bottom:0px; right:10px;
		width:200px; height:200px; background-color:black; color:white; }
	</style>
</head>
<body>

<div id="frame">This is a frame of 200px width and 200px height.</div>

</body>
</html>

Here is the sample output produced by the above CSS create frame example code:

css creating frames

In the preceding example, we have used a DIV element to be displayed as a frame in a Web page. We have also specified the position of a frame using the position, top, bottom, and right properties.


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test