- Trending Categories
Data Structure
Networking
RDBMS
Operating System
Java
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to create a split screen (50/50) with CSS?
To create a split screen with CSS, the code is as follows −
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { font-family: Arial; color: white; } h1{ padding:20px; } .left,.right { height: 100%; width: 50%; position: fixed; z-index: 1; top: 0; overflow-x: hidden; padding-top: 20px; } .left { left: 0; background-color: rgb(36, 0, 95); } .right { right: 0; background-color: rgb(56, 1, 44); } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .centered img { width: 150px; border-radius: 50%; } </style> </head> <body> <div class="left"> <h1>Some random text on the left</h1> </div> <div class="right"> <h1>Some random text on the right</h1> </div> </body> </html>
Output
The above code will produce the following output −
- Related Articles
- How to create a split button dropdown with CSS?
- How to create a full screen video background with CSS?
- How to create a full screen search box with CSS and JavaScript?
- How to create a full screen overlay navigation menu with CSS and JavaScript?
- How to make an alert dialog fill 50% of screen size on Android device?
- How to make an alert dialog fill 50% of screen size on Android devices using Kotlin?
- How to define a measurement in screen pixels with CSS?
- How to create a pagination with CSS?
- How to create a Calendar with CSS?
- How to create a preloader with CSS?
- How to create a "card" with CSS?
- How to create a "coupon" with CSS?
- How to create a transition effect with CSS?
- How to create a Menu Icon with CSS?
- How to create a Hoverable Sidenav with CSS?

Advertisements