How to create 2 column layout while keeping column background colors full size ?
In this article, we will learn how to make two-column layouts while keeping column background colors full size.
Approach: We can make a two-column layout with background colors occupying full size by using the flexbox technique in CSS and by setting the height of the columns with respect to the viewport.
HTML code: The following code demonstrates the above approach.
HTML
<!DOCTYPE html><html lang="en"> <head> <!-- Required meta tags --> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie-edge"> <style> .container { display:flex; justify-content:space-evenly; } .column { margin-top: 15px; margin-bottom: 15px; height: 100vh; width: 40%; background-color: green; border: 2px solid black; text-align: center; font-weight:bold; color: yellowgreen; } </style> </head> <body> <div class="container"> <div class="column">Column 1</div> <div class="column">Column 2</div> </div></body></html> |
Output:
.png)
