How to create 2 column layout while keeping column background colors full size ?

Last Updated : 30 Nov, 2020

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> 