Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to divide HTML page into four parts using frame?
HTML frames allow you to divide a web page into multiple independent sections, each displaying separate content. The <frameset> element acts as a container that defines how the browser window is divided into rows and columns, while individual <frame> elements specify what content to display in each section.
Important Note HTML frames are deprecated in HTML5 and are not supported by modern browsers. This article is for educational purposes to understand legacy HTML. Modern web development uses CSS Grid, Flexbox, or iframe elements instead.
Syntax
Following is the basic syntax for creating a frameset
<frameset rows="25%, 75%" cols="50%, 50%"> <frame src="page1.html" name="frame1"> <frame src="page2.html" name="frame2"> <frame src="page3.html" name="frame3"> <frame src="page4.html" name="frame4"> </frameset>
The frameset element has two main attributes
rows Defines the number and size of horizontal rows (e.g., "25%, 75%" creates two rows).
cols Defines the number and size of vertical columns (e.g., "50%, 50%" creates two equal columns).
Each frame element specifies
<frame src="filename.html" name="framename">
Where src points to the HTML file to load and name provides a unique identifier for the frame.
Dividing Page into Four Parts
To create four frames, you need a 2x2 grid layout. This requires defining two rows and two columns in the frameset element.
Method 1 Using Percentage Values
Following example divides the page into four unequal parts using percentage-based dimensions
main.html (Main frameset file)
<!DOCTYPE html> <html> <head> <title>Four Part Frame Layout</title> </head> <frameset rows="50%, 50%" cols="50%, 50%"> <frame src="frame1.html" name="topLeft"> <frame src="frame2.html" name="topRight"> <frame src="frame3.html" name="bottomLeft"> <frame src="frame4.html" name="bottomRight"> </frameset> </html>
frame1.html (Top-left section)
<!DOCTYPE html> <html> <head> <title>Frame 1</title> </head> <body style="background-color: lightblue; font-family: Arial, sans-serif; padding: 20px; text-align: center;"> <h2>Top Left Frame</h2> <p>This is the first quarter of the page.</p> </body> </html>
frame2.html (Top-right section)
<!DOCTYPE html> <html> <head> <title>Frame 2</title> </head> <body style="background-color: lightgreen; font-family: Arial, sans-serif; padding: 20px; text-align: center;"> <h2>Top Right Frame</h2> <p>This is the second quarter of the page.</p> </body> </html>
frame3.html (Bottom-left section)
<!DOCTYPE html> <html> <head> <title>Frame 3</title> </head> <body style="background-color: lightyellow; font-family: Arial, sans-serif; padding: 20px; text-align: center;"> <h2>Bottom Left Frame</h2> <p>This is the third quarter of the page.</p> </body> </html>
frame4.html (Bottom-right section)
<!DOCTYPE html> <html> <head> <title>Frame 4</title> </head> <body style="background-color: lightcoral; font-family: Arial, sans-serif; padding: 20px; text-align: center;"> <h2>Bottom Right Frame</h2> <p>This is the fourth quarter of the page.</p> </body> </html>
This creates a 2x2 grid where each frame occupies 25% of the total page area.
Method 2 Using Fixed Pixel Values
Following example creates four frames with fixed dimensions using pixel values
<!DOCTYPE html> <html> <head> <title>Fixed Size Frame Layout</title> </head> <frameset rows="300px, 300px" cols="300px, 300px"> <frame src="data:text/html,<body style='background:lightblue;padding:20px;font-family:Arial'><h3>Frame 1</h3><p>300x300 pixels</p></body>" name="frame1"> <frame src="data:text/html,<body style='background:lightgreen;padding:20px;font-family:Arial'><h3>Frame 2</h3><p>300x300 pixels</p></body>" name="frame2"> <frame src="data:text/html,<body style='background:lightyellow;padding:20px;font-family:Arial'><h3>Frame 3</h3><p>300x300 pixels</p></body>" name="frame3"> <frame src="data:text/html,<body style='background:lightcoral;padding:20px;font-family:Arial'><h3>Frame 4</h3><p>300x300 pixels</p></body>" name="frame4"> </frameset> </html>
This creates four frames, each exactly 300x300 pixels in size. Using fixed pixel values ensures consistent dimensions regardless of browser window size.
Frame Attributes and Properties
The frame element supports several attributes for customization
| Attribute | Description | Example |
|---|---|---|
src |
Specifies the URL of the document to display | src="page.html" |
name |
Assigns a unique name to the frame | name="leftFrame" |
scrolling |
Controls scrollbar display (yes, no, auto) | scrolling="no" |
frameborder |
Shows or hides frame borders (1 or 0) | frameborder="0" |
noresize |
Prevents users from resizing the frame | noresize="noresize" |
Modern Alternatives to Frames
Since HTML frames are deprecated, modern web development uses these alternatives
CSS Grid Layout
<!DOCTYPE html>
<html>
<head>
<title>CSS Grid Four Parts</title>
<style>
.grid-container {
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-columns: 1fr 1fr;
height: 100vh;
gap: 2px;
}
.grid-item {
padding: 20px;
text-align: center;
font-family: Arial, sans-serif;
}
.item1 { background-color: lightblue; }
.item2 { background-color: lightgreen; }
.item3 { background-color: lightyellow; }
.item4 
5K+ Views
