How To Create A 2-column Layout Grid With CSS? - Tutorialspoint

Trang chủ » Html Css Div 2 Column Layout » How To Create A 2-column Layout Grid With CSS? - Tutorialspoint

Có thể bạn quan tâm

How to create a 2-column layout grid with CSS? CSSWeb DevelopmentFront End Technology

To create a 2-column layout grid on a web page, we will create and position two divs, one on the left and the next on the right.

Create the First div

To begin with, we will create a div, beginning with the left div −

<div class="left"> <h2>Some random text on the left</h2> </div>

Create the Second div

Create the 2nd div i.e., the right div −

<div class="right"> <h2>Some random text on the right</h2> </div>

Position the divs on the Left and Right

The two divs are positioned on the left and right using the left and right property −

.left { left: 0; background-color: rgb(36, 0, 95); } .right { right: 0; background-color: rgb(56, 1, 44); }

Fix the divs

The divs are positioned fixed using the fixed value of the position property −

.left, .right { height: 50%; width: 50%; position: fixed; overflow-x: hidden; padding-top: 20px; }

Example

To create a 2-column layout grid with CSS, the code is as follows −

<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <style> body { font-family: Arial; color: white; } .left, .right { height: 50%; width: 50%; position: fixed; overflow-x: hidden; padding-top: 20px; } .left { left: 0; background-color: rgb(36, 0, 95); } .right { right: 0; background-color: rgb(56, 1, 44); } </style> </head> <body> <h1 style="color: black;">Two column layout grid example</h1> <div class="left"> <h2>Some random text on the left</h2> </div> <div class="right"> <h2>Some random text on the right</h2> </div> </body> </html>

AmitDiwan AmitDiwan Updated on: 17-Nov-2023

2K+ Views

Từ khóa » Html Css Div 2 Column Layout