CSS Divs Side by Side

Introduction

Cascading Style Sheets (CSS) is a strong styling language that permits web developers to control the layout and presentation of HTML elements. One normal layout prerequisite is setting various div elements side by side. From the conventional float property to state-of-the-art CSS Grid and Flexbox models, developers have a variety of instruments available to them.

As we explore these approaches, we will discuss the practical implementation and adapt to the evolving landscape of web design, introducing advanced methods that meet the requirements of responsive and interactive designs. This guide will delve into five distinct methods of achieving this using CSS.

1. Float Property:

The float attribute is a well-established method for arranging divs next to each other. When float is applied to elements, they are positioned horizontally next to each other. Nonetheless, this approach comes with some drawbacks like clearing the float and potential issues with the parent container's height.

Example:

Example


.div-container {
  overflow: auto; /* Clear the float */
}

.div-side-by-side {
  float: left;
  width: 50%; /* Adjust width as needed */
}

Example


<!DOCTYPE html>
<html lang = " en " >
<head>
  <meta charset = " UTF-8 " >
  <meta name = " viewport " content = " width = device- width, initial-scale = 1. 0 " >
  <style>
    .float-container {
      overflow: auto;
      background-color: #e6f7ff;
      padding: 20px;
    }

    .float-child {
      float: left;
      width: 48%;
      box-sizing: border-box;
      border: 2px solid #66b3ff;
      margin-right: 4%;
      padding: 20px;
      color: #333;
    }

    .float-child:last-child {
      margin-right: 0;
    }
  </style>
</head>
<body>
  <div class = " float-container " >
    <div class = " float-child " >
      <h2> Float Column 1 </h2>
      <p> This is an enhanced Float Column with a blue border and padding. </p>
    </div>
    <div class = " float-child " >
      <h2> Float Column 2 </h2>
      <p> This is another Float Column with a blue border and padding. </p>
    </div>
  </div>
</body>
</html>

Output:

Container Styling:

✅ .float-container utilizes a clear: auto; property to wrap around the floated elements.
✅ background color and padding for aesthetic appeal.

Child Styling:

✅ .float-child has a float: left; property to make the children float close to one another.
✅ Width: 48%; sets every child's width to leave a little gap.
✅ Margin-right: 4%; makes space between the two columns.
✅ Background-color and border for styling.

2. Flexbox:

Flexbox represents a modern layout system that operates on the principle of creating flexible and responsive designs. By employing Flexbox, it becomes effortless to establish a container and define its display property as flex. Subsequently, the child components within the container can be horizontally aligned using the flex property.

Example:

Example


.div-container {
  display: flex;
}

.div-side-by-side {
  flex: 1; /* Distribute space evenly among children */
}

Example


<!DOCTYPE html>
<html lang = " en " >
<head>
  <meta charset = " UTF-8 " >
  <meta name = " viewport " content = " width = device-width, initial-scale = 1. 0 " >
  <style>
    .flex-container {
      display: flex;
      justify-content: space-between;
      background-color: #ffe6e6;
      padding: 20px;
    }

    .flex-child {
      flex: 1;
      border: 2px solid #ff6666;
      padding: 20px;
      text-align: center;
      color: #333;
    }

    .flex-child:first-child {
      margin-right: 20px;
      background-color: #ff6666;
      color: #fff;
    }

    .flex-child:last-child {
      background-color: #ff3333;
      color: #fff;
    }
  </style>
</head>
<body>
  <div class = " flex-container " >
    <div class = " flex-child " >
      <h2> Flex Column 1 </h2>
      <p> This is an enhanced Flex Column with a red background and white text color. </p>
    </div>
    <div class = " flex-child " >
      <h2> Flex Column 2 </h2>
      <p> This is another Flex Column with a dark red background and white text color. </p>
    </div>
  </div>
</body>
</html>

Output:

Container Styling:

The

✅ class represents a flex container that organizes content with justified spacing using the space-between property for distribution.

It offers background-color and padding options for customization.

Child Styling:

✅ .flex-child has flex: 1; to uniformly convey accessible space.
✅ Margin-right: 20px; for space between the two columns.
✅ Background colors and border for styling.

3. Grid Layout:

CSS Grid Layout is a robust layout system that caters to the behavior of more intricate elements. By defining a grid container and specifying the grid-template-columns property, you can create a grid where child elements are positioned next to each other.

Example:

Example


.div-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Adjust column count as needed */
}

Example


<!DOCTYPE html>
<html lang = " en " >
<head>
  <meta charset = " UTF-8 " >
  <meta name = " viewport " content = " width = device-width, initial-scale = 1. 0 " >
  <style>
    .grid-container {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 20px;
      background-color: #e6ffe6;
      padding: 20px;
    }

    .grid-child {
      box-sizing: border-box;
      border: 2px solid #66ff66;
      padding: 20px;
      color: #333;
    }
  </style>
</head>
<body>
  <div class = " grid-container " >
    <div class = " grid-child " >
      <h2> Grid Column 1 </h2>
      <p> This is an enhanced Grid Column with a green border and padding. </p>
    </div>
    <div class = " grid-child " >
      <h2> Grid Column 2 </h2>
      <p> This is another Grid Column with a green border and padding. </p>
    </div>
  </div>
</body>
</html>

Output:

Container Styling:

✅ .grid-container represents a grid container containing two identical columns separated by a space.
✅ background color and padding are applied for styling purposes.

Child Styling:

The

✅ .grid-child class applies box-sizing: border-box; to ensure accurate dimensions.

It includes borders and padding for decorative purposes.

4. Inline-Block:

Utilizing the inline-block display property allows elements to be positioned next to each other while still maintaining their inline characteristics. However, it is important to be cautious of the default white space between inline-block elements, as it may result in unintended spacing.

Example:

Example


.div-container {
  font-size: 0; /* Remove white space between inline-block elements */
}

.div-side-by-side {
  display: inline-block;
  width: 50%; /* Adjust width as needed */
}

Example


<!DOCTYPE html>
<html lang = " en " >
<head>
  <meta charset = " UTF-8 " >
  <meta name = " viewport " content = " width = device-width, initial-scale = 1. 0 " >
  <style>
    .inline-container {
      font-size: 0;
      background-color: #f0e6ff;
      padding: 20px;
    }

    .inline-child {
      display: inline-block;
      width: 48%;
      box-sizing: border-box;
      border: 2px solid #9980FA;
      margin-right: 4%;
      padding: 20px;
      font-size: 16px;
      color: #333;
    }

    .inline-child:last-child {
      margin-right: 0;
    }
  </style>
</head>
<body>
  <div class = " inline-container " >
    <div class = " inline-child " >
      <h2> Inline Column 1 </h2>
      <p> This is an enhanced Inline Column with a purple border and padding. </p>
    </div>
    <div class = " inline-child " >
      <h2> Inline Column 2 </h2>
      <p> This is another Inline Column with a purple border and padding. </p>
    </div>
  </div>
</body>
</html>

Output:

5. CSS Columns:

CSS columns provide a technique for creating a multi-column structure. By utilizing the column-count attribute on a container, you can specify the quantity of columns, effectively aligning the child elements next to each other.

Example:

Example


.div-container {
  column-count: 2; /* Adjust column count as needed */
}

.div-side-by-side {
  break-inside: avoid-column; /* Prevent elements from breaking across columns */
}

Example


<!DOCTYPE html>
<html lang = " en " >
<head>
  <meta charset = " UTF-8 " >
  <meta name = " viewport " content = " width = device-width, initial-scale = 1. 0 " >
  <style>
    .column-container {
      column-count: 2;
      column-gap: 20px;
      background-color: #ffe6cc;
      padding: 20px;
    }

    .column-child {
      break-inside: avoid-column;
      box-sizing: border-box;
      border: 2px solid #ffaa80;
      padding: 20px;
      color: #333;
    }
  </style>
</head>
<body>
  <div class = " column-container " >
    <div class = " column-child " >
      <h2> Column 1 </h2>
      <p> This is an enhanced Column with an orange border and padding. </p>
    </div>
    <div class = " column-child " >
      <h2> Column 2 </h2>
      <p> This is another Column with an orange border and padding. </p>
    </div>
  </div>
</body>
</html>

Output:

Container Styling:

✅ .column-container utilizes column-count: 2; to make two columns.
✅ column-gap for space between columns.
✅ Background-color and cushioning for styling.

Child Styling:

The

✅ .column-child utilizes break-inside: avoid-column; to prevent column breaks.

Employ

✅ Box-sizing: border-box; for managing borders and padding in styling.

Conclusion

When it comes to arranging CSS divs next to each other, there exist various approaches, each presenting its own advantages and limitations. Selecting the appropriate technique depends on the requirements of your project and your inclination towards a specific layout paradigm. Whether you opt for floating, flexbox, grid, inline-block, or columns, familiarizing yourself with these methods will enable you to craft efficient and adaptable designs.

Introduction

1. Float Property:

2. Flexbox:

3. Grid Layout:

4. Inline-Block:

5. CSS Columns:

Conclusion

Input Required