ตัวอย่างโค้ด
<!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); } .centered { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; } .centered img { width: 150px; border-radius: 50%; } </style> </head> <body> <h1 style="color: black;">Two column layout grid example</h1> <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>
ผลลัพธ์
ตัวอย่างนี้แสดงเลย์เอาต์ 2 คอลัมน์แบบเต็มหน้าจอ โดยใช้ position: fixed เพื่อให้คอลัมน์ทั้งสองคงที่ตลอดเวลา เหมาะสำหรับการออกแบบหน้าเว็บแบบเต็มหน้าจอ (full-screen layout)
