Use DIVs for multiple columns layout inside a DIV using CSS?

By IncludeHelp Last updated : November 13, 2023

To use DIVs for multiple columns layout inside a DIV using CSS, create a parent container element (div), and inside them create multiple child container elements (divs). To give them styles use the CSS styles.

Using DIVs for multiple columns layout

Use the following steps -

Step 1: Add HTML

Write the following HTML code:

<div class="container">
  <div class="col1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet massa eget lectus suscipit semper. Etiam interdum faucibus est, quis hendrerit nunc laoreet at.</p>
  </div>
  <div class="col2">
    <p>Etiam sodales leo et urna convallis ullamcorper. Nam id purus in erat placerat congue at id massa. Vivamus iaculis diam at ex porttitor vestibulum. Nulla facilisi. Ut a accumsan nulla. Curabitur dapibus feugiat justo eu facilisis. Maecenas ac leo eu velit iaculis lobortis.</p>
  </div>
  <div class="col3">
    <p>Fusce bibendum, neque nec vehicula tempor, ex neque lobortis magna, at rutrum eros ex eget neque. Sed vitae purus enim. Curabitur ac sem varius, aliquet arcu non, pulvinar diam. Duis ipsum lacus, pretium id fringilla vel, blandit vel mi.</p>
  </div>
  <div class="col4">
    <p>Nunc eget fringilla velit. Proin posuere ex id nisl aliquet, nec rutrum mi maximus.</p>
  </div>
</div>

Step 2: Add CSS

Write the following CSS:

body {
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  font-size: 1em;
  max-width: 960px;
  margin: auto;
}

* {
  box-sizing: border-box;
}

.col1,
.col2,
.col3,
.col4 {
  float: left;
  width: 25%;
  color: #000;
  padding: 10px;
  height: 350px;
}

.col1 {
  background-color: #C1C1C1;
}

.col2 {
  background-color: #F5F5DC;
}

.col3 {
  background-color: #00FFFF;
}

.col4 {
  background-color: #FFD700;
}

.container:after {
  clear: both;
}

Example

In this example, we are using DIVs for multiple columns layout inside a DIV with CSS, the code is as follows -

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style type="text/css">
      body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      font-size: 1em;
      max-width: 960px;
      margin: auto;
      }
      * {
      box-sizing: border-box;
      }
      .col1, .col2, .col3, .col4 {
      float: left;
      width: 25%;
      color: #000;
      padding: 10px;
      height: 350px;
      }
      .col1 {
      background-color: #C1C1C1;
      }
      .col2 {
      background-color: #F5F5DC;
      }
      .col3 {
      background-color: #00FFFF;
      }
      .col4 {
      background-color: #FFD700;
      }
      .container:after {
      clear: both;
      }
    </style>
  </head>
  <body>
    <h1 style="text-align: center;">An example to use DIVs for multiple columns layout inside a DIV using CSS</h1>
    <div class="container">
      <div class="col1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris aliquet massa eget lectus suscipit semper. Etiam interdum faucibus est, quis hendrerit nunc laoreet at.</p>
      </div>
      <div class="col2">
        <p>Etiam sodales leo et urna convallis ullamcorper. Nam id purus in erat placerat congue at id massa. Vivamus iaculis diam at ex porttitor vestibulum. Nulla facilisi. Ut a accumsan nulla. Curabitur dapibus feugiat justo eu facilisis. Maecenas ac leo eu velit iaculis lobortis.</p>
      </div>
      <div class="col3">
        <p>Fusce bibendum, neque nec vehicula tempor, ex neque lobortis magna, at rutrum eros ex eget neque. Sed vitae purus enim. Curabitur ac sem varius, aliquet arcu non, pulvinar diam. Duis ipsum lacus, pretium id fringilla vel, blandit vel mi.</p>
      </div>
      <div class="col4">
        <p>Nunc eget fringilla velit. Proin posuere ex id nisl aliquet, nec rutrum mi maximus.</p>
      </div>
    </div>
  </body>
</html>

Output

The output of the above example is:

Use DIVs for multiple columns layout inside a DIV

How to set a background-color for the width of text, not the width of the entire element, using only CSS?

How to display customized quotes before and after text using CSS?