Qasim Nadeem
Qasim Nadeem's

Qasim Nadeem's

How to make Columns of Webpage Content using HTML5 & CSS3

How to make Columns of Webpage Content using HTML5 & CSS3

Qasim Nadeem's photo
Qasim Nadeem
·Jun 8, 2022·

1 min read

Play this article

It's super easy to make columns of your webpage content using HTML5 & CSS3. Just use the column-count command and specify no. of columns you need. If you are using a browser that doesn't support column-count command use it with the browser prefixes like -webkit-column-count: 4; for Chrome and Safari browsers and -moz-column-count: 4; for Mozilla Firefox etc.

<!DOCTYPE html>  
<html>  
<head>  
<style>  
    .newspaper {  
       column-count: 4;  
       column-gap: 20px;  
       column-rule: 1px solid rgb(7, 4, 88);  
    }  
</style>  
</head>  
<body>  
    <div class="newspaper">  
        <p>Put your content here</p>  
    </div>  
</body>  
</html>
 
Share this