Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Multi-Column Layout for Text Flow using HTML
In HTML <multicol> tag is used to create multi-column layouts. It has opening and closing tags, <multicol> </multicol>. Following is the syntax of multicol tag.
<multicol> ??.. </multicol>
Attributes of <multicol> tag
Following are the attributes used in <multicol> tag −
cols
The value used for col attribute is number and it specifies how many columns need to be used. Following is the syntax of cols attribute in mutlicol tag.
<multicol cols=3>
gutter
The value used for gutter attribute is px, it specifies the distance between each column in pixels. Following is the Syntax of gutter attribute in <multicol> tag
<multicol cols=3 gutter=10>
width
The value used for width attribute is px, it specifies the width of the column. Following is the syntax of width attribute in <multicol> tag.
<multicol cols=3 width="40%">
Example
In the following example we are trying to create a Multi-Column Layout for Text Flow using HTML −
<!DOCTYPE html>
<html>
<body>
<h2>HTML Tutorial</h2>
<multicol cols=3>
<p>HTML stands as Hyper Text Markup Language.</p>
</multicol>
</body>
</html>
Note − The <multicol> tag is deprecated and is no longer recommended. To create multicol we use DIV tags in HTML, which can be shown below:
<!DOCTYPE html>
<html>
<head>
<style>
.sample {
column-count: 4;
column-gap: 10px;
column-rule: 5px solid blue;
}
</style>
</head>
<body>
<h1> HTML Tutorial</h1>
<div class="sample"> HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. HTML Stands as Hyper Text Markup Language. </div>
</body>
</html>
CSS Multi-Column Layout
There are so many CSS properties for multicolumn arrangement in web pages, if we consider newspaper, the arrangement of text is in the form of multicolumn layout only. The different column properties are shown below −
column-count
column-gap
column-rule-style
column-rule-width
column-rule-color
column-rule
column-span
column-width
Example
Following example, to create a multicolumn layout of text using CSS properties −
<!DOCTYPE html>
<html>
<head>
<title>Muli-column property</title>
<style>
.content {
-webkit-column-span: 4;
column-span: 4;
-moz-column-count: 4;
column-count: 4;
padding-top: 35px;
-webkit-column-gap: 50px;
-moz-column-gap: 50px;
column-gap: 50px;
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
-webkit-column-rule-width: 10px;
-moz-column-rule-width: 10px;
column-rule-width: 10px;
width: 100%;
text-align: justify;
-webkit-column-rule-color: blue;
-moz-column-rule-color: blue;
column-rule-color: blue;
}
.TP {
text-align: center;
font-size: 40px;
font-weight: bold;
color: red;
}
.tutorial {
text-align: center;
}
</style>
</head>
<body>
<div class="TP">TutorialsPoint</div>
<div class="tutorial">A Leading Edutech Company</div>
<div class="content"> Tutorials Point is a leading Ed Tech company striving to provide the best learning material on technical and non-technical subjects. Tutorials Point India Private Limited, 4th Floor Incor9 Building, Kavuri Hills, Madhapur, Hyderabad, Telangana - 500081, INDIA </div>
</body>
</html>
2K+ Views
