DEV Community

Vaibhav Singh
Vaibhav Singh

Posted on

Dividing equal columns in the webpage.

Designing a webpage or document with a clean and organized layout is essential for a positive user experience. One effective way to achieve this is by utilizing three columns to structure your content. In this article, we will explore how to create three columns and center the contents within them, providing a visually appealing and balanced presentation.

HTML Structure

To begin, let's set up the basic HTML structure for our three columns. We'll use the HTML5 semantic tags for better clarity and structure. Here's a simple example:

<!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</title>
    <link rel="stylesheet" href="styles.css"> <!-- Link to your external stylesheet -->
</head>
<body>
    <div class="container">
        <div class="column"> 
            Col1
        </div>
        <div class="column">
            Col2
        </div>
        <div class="column">
            Col3
        </div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Now, let's style our columns and center the contents within them using CSS. Create an external stylesheet (styles.css) and link it in the HTML file:

css

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

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

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

Enter fullscreen mode Exit fullscreen mode

Explanation:

-> The display: flex; property on the container turns it into a flex container.
-> justify-content: space-between; ensures that the columns are evenly distributed with space between them.
-> The flex: 1; property on each column allows them to take equal space within the container.
-> text-align: center; centers the content inside each column.

Conclusion:
Creating a three-column layout and centering the contents is a fundamental skill in web design. By following this simple guide, you can achieve a clean and balanced design for your web pages or documents, enhancing the overall user experience. Remember to customize the styling to match your specific design preferences and project requirements.

Here the sample for it
https://codepen.io/vonser/pen/PoLjgXe

Top comments (0)