Dividing Equal Columns on a Webpage

Posted by

Dividing a webpage into equal columns is a common layout technique used in web design to create visually appealing and balanced content sections. In this guide, we’ll explore different methods to achieve this using HTML and CSS.

HTML Structure:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three Columns Layout - Wizbrand</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="container">
            <div class="container">
                <div class="column"> 
                    Col-1
                </div>&nbsp;
                <div class="column">
                    Col-2
                </div>&nbsp;
                <div class="column">
                    Col-3
                </div>&nbsp;
            </div>
        </div>
    </div>
    
</body>
</html>

CSS Styling

body {
    margin: 0;
    font-family: 'Arial', sans-serif;
}

.container {
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.column {
    flex: 1;
    text-align: center;
}

Output:-

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x
()
x