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 > |
chevron_right
filter_none
Output: