How To Divide Text Into Two Columns Layout Using CSS - GeeksforGeeks
Có thể bạn quan tâm
Skip to content
- Tutorials
- Python Tutorial
- Taking Input in Python
- Python Operators
- Python Data Types
- Python Numbers
- Python String
- Python Lists
- Python Tuples
- Sets in Python
- Python Dictionary
- Python Loops and Control Flow
- Python Conditional Statements
- Python Loops
- Python Functions
- Python OOPS Concept
- Python Data Structures
- Python DSA
- Linked List
- Stack
- Queue
- Tree
- Heap
- Hashing
- Graph
- Sets
- Map
- Advance Data Structure
- Sorting Algorithms
- Searching Algorithms
- Python Exception Handling
- Python File Handling
- Python Exercises
- Python List Exercise
- Python String Exercise
- Python Tuple Exercise
- Python Dictionary Exercise
- Python Set Exercise
- Python Design Patterns
- Python Programming Examples
- Python Practice Questions
- Java
- Java Programming Language
- Java Tutorial
- Data Types
- Variables
- Operators
- Flow Control in Java
- Loops in Java
- Methods
- Strings
- Arrays
- OOPs Concepts
- OOPs Concepts
- Classes and Objects
- Access Modifiers
- Inheritance
- Abstraction
- Encapsulation
- Polymorphism
- Interface
- Packages
- Multithreading
- File Handling
- Regular Expression
- Java Collections
- Java Collections
- Collection Class
- List Interface
- ArrayList
- LinkedList Class
- Queue Interface
- Set Interface
- HashSet Class
- Map Interface
- HashMap Class
- HashTable Class
- Iterator
- Comparator
- Collection Interview Questions
- Java 8 Tutorial
- Java Programs
- Java Programming Examples
- Java Array Programs
- Java String Programs
- Java Date-Time Programs
- Java File Handling Programs
- Java Collection Programs
- Java JDBC Programs
- Java Apache POI Programs
- Java OpenCV Programs
- Java Interview Questions
- Java Interview Questions
- Core Java Interview Questions-Freshers
- Java Multithreading Interview Questions
- OOPs Interview Questions and Answers
- Java Exercises
- Java Quiz
- Java Quiz
- Core Java MCQ
- Java Projects
- Advance Java
- Spring Tutorial
- Spring Boot Tutorial
- Spring Boot Interview Questions
- Spring MVC Tutorial
- Spring MVC Interview Questions
- Hibernate Tutorial
- Hibernate Interview Questions
- Java Programming Language
- Programming Languages
- C
- C++
- JavaScript
- PHP
- R Tutorial
- C#
- SQL
- Scala
- Perl
- Go Language
- Kotlin
- System Design
- System Design Tutorial
- What is System Design
- Key Terminologies in System Design
- Analysis and Architecture of Systems
- Scalability in System Design
- Databases in System Design
- High Level Design or HLD
- Low Level Design or LLD
- Case Studies in Designing Systems
- Complete System Design Tutorial
- Software Design Patterns
- System Design Roadmap
- Top 10 System Design Interview Questions and Answers
- System Design Tutorial
- Interview Corner
- Company Preparation
- Top Topics
- Practice Company Questions
- Interview Experiences
- Experienced Interviews
- Internship Interviews
- Competitive Programming
- Multiple Choice Quizzes
- Aptitude for Placements
- Computer Science Subjects
- Operating System
- DBMS
- Computer Networks
- Engineering Mathematics
- Computer Organization and Architecture
- Theory of Computation
- Compiler Design
- Digital Logic
- Software Engineering
- DevOps
- GIT
- AWS
- Docker
- Kubernetes
- Microsoft Azure Tutorial
- Google Cloud Platform
- Linux
- Linux Tutorial
- Linux Commands A-Z
- Linux Commands Cheatsheet
- File Permission Commands
- Linux System Administration
- Linux File System
- Linux Shell Scripting
- Linux Networking
- Linux Interview Questions
- Software Testing
- Software Testing Tutorial
- Software Engineering Tutorial
- Testing Interview Questions
- Jira
- Databases
- DBMS Tutorial
- SQL Tutorial
- PostgreSQL Tutorial
- MongoDB Tutorial
- SQL Interview Questions
- MySQL Interview Questions
- PL/SQL Interview Questions
- Android
- Android Tutorial
- Android Studio Tutorial
- Kotlin For Android
- Android Projects
- Android Interview Questions
- 6 Weeks of Android App Development
- Excel
- MS Excel Tutorial
- Introduction to MS Excel
- Data Analysis in Excel
- Basic Excel Formulas & Functions
- Data Analysis in Advanced Excel
- Workbooks
- Statistical Functions
- Data Visualization in Excel
- Pivot Tables in Excel
- Excel Spreadsheets in Python
- Basic Excel Shortcuts
- Mathematics
- Number System
- Algebra
- Linear Algebra
- Trigonometry
- Set Theory
- Statistics
- Probability
- Geometry
- Mensuration
- Logarithms
- Calculus
- Python Tutorial
- DSA
- Data Structures
- Arrays
- Matrix
- Strings
- Linked List
- Singly Linked List
- Doubly Linked List
- Circular Linked List
- Doubly Circular Linked List
- Linked List Tutorial
- Stack
- Queue
- Tree
- Generic Tree
- Binary Tree
- Binary Search Tree
- AVL Tree
- B Tree
- B+ Tree
- Red Black Tree
- Tree Data Structure Tutorial
- Heap
- Hashing
- Graph
- Set Data Structure
- Map Data Structure
- Advanced Data Structure
- Data Structures Tutorial
- Algorithms
- Analysis of Algorithms
- Design and Analysis of Algorithms
- Asymptotic Analysis
- Asymptotic Notations
- Worst, Average and Best Cases
- Searching Algorithms
- Linear Search
- Binary Search
- Searching Algorithms Tutorial
- Sorting Algorithms
- Selection Sort
- Bubble Sort
- Insertion Sort
- Merge Sort
- Quick Sort
- Heap Sort
- Counting Sort
- Radix Sort
- Bucket Sort
- Sorting Algorithms Tutorial
- Greedy Algorithms
- Dynamic Programming
- Graph Algorithms
- Pattern Searching
- Recursion
- Backtracking
- Divide and Conquer
- Mathematical Algorithms
- Geometric Algorithms
- Bitwise Algorithms
- Randomized Algorithms
- Branch and Bound
- Algorithms Tutorial
- Analysis of Algorithms
- DSA Tutorial
- Practice
- All DSA Problems
- Problem of the Day
- Company Wise Coding Practice
- Amazon
- Microsoft
- Flipkart
- Explore All
- GfG SDE Sheet
- Practice Problems Difficulty Wise
- School
- Basic
- Easy
- Medium
- Hard
- Language Wise Coding Practice
- CPP
- Java
- Python
- Curated DSA Lists
- Beginner's DSA Sheet
- Top 50 Array Problems
- Top 50 String Problems
- Top 50 DP Problems
- Top 50 Graph Problems
- Top 50 Tree Problems
- Competitive Programming
- Company Wise SDE Sheets
- Facebook SDE Sheet
- Amazon SDE Sheet
- Apple SDE Sheet
- Netflix SDE Sheet
- Google SDE Sheet
- DSA Cheat Sheets
- SDE Sheet
- DSA Sheet for Beginners
- FAANG Coding Sheet
- Product-Based Coding Sheet
- Company-Wise Preparation Sheet
- Top Interview Questions
- Puzzles
- All Puzzles
- Top 100 Puzzles Asked In Interviews
- Top 20 Puzzles Commonly Asked During SDE Interviews
- Data Structures
- Data Science
- Python Tutorial
- R Tutorial
- Machine Learning
- Data Science using Python
- Data Science using R
- Data Science Packages
- Pandas Tutorial
- NumPy Tutorial
- Data Visualization
- Python Data Visualization Tutorial
- Data Visualization with R
- Data Analysis
- Data Analysis with Python
- Data Analysis with R
- Deep Learning
- NLP Tutorial
- Web Tech
- HTML Tutorial
- CSS Tutorial
- JavaScript Tutorial
- PHP Tutorial
- ReactJS Tutorial
- NodeJS Tutorial
- AngularJS Tutorial
- Bootstrap Tutorial
- Typescript
- Web Development Using Python
- Django
- Django Tutorial
- Django Projects
- Django Interview Questions
- Flask
- Flask Tutorial
- Flask Projects
- Flask Interview Questions
- Postman
- Github
- Django
- Wordpress Tutorial
- Web Design
- Cheat Sheets
- HTML Cheat Sheet
- CSS Cheat Sheet
- JavaScript Cheat Sheet
- React Cheat Sheet
- Angular Cheat Sheet
- jQuery Cheat Sheet
- Bootstrap Cheat Sheet
- Learn Complete Web Development
- Courses
- Go Premium
- Coding for Everyone
- DSA to Development
- Machine Learning & Data Science
- Generative AI & ChatGPT
- Become AWS Certified
- DSA Courses
- Data Structure & Algorithm(C++/JAVA)
- Data Structure & Algorithm(Python)
- Data Structure & Algorithm(JavaScript)
- Programming Languages
- CPP
- Java
- Python
- JavaScript
- C
- CSS Tutorial
- CSS Exercises
- CSS Interview Questions
- CSS Selectors
- CSS Properties
- CSS Functions
- CSS Examples
- CSS Cheat Sheet
- CSS Templates
- CSS Frameworks
- Bootstrap
- Tailwind
- CSS Formatter
The purpose of this article is to divide the text into two columns by using the CSS column property. This property is used to set the number of columns and the width of these columns.
Syntax:
columns: column-width columns-count | auto | initial | inherit;Example:
HTML
<!DOCTYPE html> <html> <head> <style> body { text-align: center; color: green; } .GFG { -webkit-columns: 40px 2; /* Chrome, Safari, Opera */ -moz-columns: 60px 2; /* Firefox */ columns: 60px 2; } </style> </head> <body> <h1> How to divide the text in the division element into two columns using css? </h1> <div class="GFG"> <h2>Welcome to the world of Geeks!!</h2> How many times were you frustrated while looking out for a good collection of programming/algorithm/interview questions? What did you expect and what did you get? This portal has been created to provide well written, well thought and well-explained solutions for selected questions. <p> <strong>Our team includes:</strong> <p> Sandeep Jain: An IIT Roorkee alumnus and founder of GeeksforGeeks. He loves to solve programming problems in most efficient ways. Apart from GeeksforGeeks, he has worked with DE Shaw and Co. as a software developer and JIIT Noida as an assistant professor. </p> <p> Vaibhav Bajpai: Amazed by computer science, he is a technology enthusiast who enjoys being a part of a development. Off from work, you canfind him in love with movies, food, and friends. </p> <p> Shikhar Goel: A Computer Science graduate who likes to make things simpler. When he's not working, you can find him surfing the web, learning facts, tricks and life hacks. He also enjoys movies in his leisure time. </p> <p> Dharmesh Singh: A software developer who is always trying to push boundaries in search of great breakthroughs. Off from his desk, you can find him cheering up his buddies and enjoying life. </p> <p> Shubham Baranwal: A passionate developer who always tries to learn new technology and software. In his free time, either he reads some articles or learns some other stuff. </p> </div> </body> </html> |
Output:
Supported Browsers are listed below:
- Google Chrome 43.0
- Internet Explorer 10.0
- Firefox 16.0
- Opera 30.0
- Safari 9.0
M
ManasChhabra2 Follow Improve Next Article How to arrange text in multi columns using CSS3 ?Please Login to comment...
Similar Reads
ReactJS MDBootstrap Columns Layout MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use Columns Layout in ReactJS MDBootstrap. Columns Layout allows the users to create columns, add styles to them and modify them based on user needs. Synta 2 min read BootStrap 5 Grid system Auto-layout columns Bootstrap's grid system is responsive. it's come with a flexbox and allows up to 12 columns across the page. you can also group the columns together. Auto-layout columns: To create easy column sizes without an explicit numbered class like .col-sm-6, Use breakpoint-specific column classes. Equal-width: The equal-width grid system is basically used t 2 min read How to create two column grid and two column layout using jQuery Mobile ? jQuery Mobile provides CSS-based columns that are responsive. The grids have a width of 100%, grids do not have a background color, border, and padding. The grids contain elements in them, these elements can be made float side-by-side using the ui-block-a or ui-block-b or ui-block-c or ui-block-d class. Columns in a grid are of equal width. In 2 co 2 min read How to align text in CSS where both columns are straight? Introduction: To align text in CSS there are lots of options available. Basically columns are straight always in CSS or in HTML, but here the columns are straight means that the gap between columns and the number of lines in each column should be equal. Approach: In CSS each column act as a box, so how alignment works and controlled is totally depe 2 min read Bootstrap 5 Columns Offsetting Columns Bootstrap 5 Offsetting columns can offset grid columns in two ways, offset classes and margin utilities. Offset classes are used to match the size of columns and margin utilities are used for quick layouts. Bootstrap 5 Offsetting columns: Offset classes: This class is used to set the offset of the grid. Size is the among small (sm), medium (md), an 2 min read How to divide an image into different clickable link area using HTML? An image can be divided into different clickable and linkable areas using an Image map. The Image map is used for navigation purposes. An image map consists of several tags: img: It specifies the image to be included in the map.map: It creates a map of clickable areas.area: It is used inside the map element to define the clickable areas.We can make 2 min read How to divide an HTML page into four parts using frames ? This article shows how to divide a page into four parts using HTML frames. This can be used to represent the header, sidebar, footer, and main content. The frames are created using the <frame> tag. We will have to use four HTML files for each of the portions. Syntax<frameset> // frame elements</frameset>Example 1: This example wil 2 min read How to create long shadow of text without using text-shadow in HTML and CSS ? Shadows are really a nice way to give depth and 3-D look to any text. Generally, we use text-shadow to give shadow to the text but this shadow is short and to create long shadow (shadow in which text is visible like that of reflection) we have to use before selector and skew function. Approach: The approach is to use a skew to create tilted text fi 2 min read Text Animation with changing the color of the text using HTML and CSS Text animation is the creation of beautiful and colorful letters, words, and paragraphs with a decorative movable effect. The movement can be seen in some fashion within the area or across the screen following some regular pattern. The @keyframes in CSS allows defining a series of animations at specific points during an animation sequence. In this 2 min read How to Style the Text using text-decoration Property in CSS ? The text-decoration property in CSS is used to style the decoration of text, such as underlining, overlining, line-through, and blink effects. It is a versatile property that can enhance the visual appearance of text. Syntax/* Example of using the text-decoration property */ .element { text-decoration: [value]; }The text-decoration Property ValuesT 1 min read View More Articles Article Tags :- CSS
- Web Technologies
- CSS-Questions
What kind of Experience do you want to share?
Interview Experiences Admission Experiences Career Journeys Work Experiences Campus Experiences Competitive Exam Experiences Can't choose a topic to write? click here for suggested topics Write and publish your own ArticleTừ khóa » Html Css Two Column Text
-
CSS Multiple Columns - W3Schools
-
How To Create A Two Column Layout - W3Schools
-
Flow 2 Columns Of Text Automatically With CSS - Stack Overflow
-
Columns - CSS: Cascading Style Sheets - MDN Web Docs - Mozilla
-
How To Arrange Text In Multi Columns Using CSS3 ? - GeeksforGeeks
-
Columns - CSS-Tricks
-
Two Column With Text Header - Layout « HTML / CSS
-
Html Css Two Column Layout Code Example
-
When And How To Use CSS Multi-Column Layout
-
Multi-Column Layout With CSS - Vegibit
-
How To Create Columns In HTML
-
How To Use Float And Columns To Lay Out Content With CSS
-
Search Code Snippets | Html Text Two Columns - Code Grepper
-
5.8 Multi-column Layout (*) | R Markdown Cookbook - Bookdown