Positioning Two Divs Side by Side in CSS

When designing a webpage layout, one common requirement is to position two div elements side by side within a parent container. This can be achieved using several CSS techniques, each with its own use cases and compatibility considerations.

Introduction

In this tutorial, we explore multiple methods for placing two div elements side by side: using floats, tables, Flexbox, inline-blocks, and CSS Grid. These approaches cater to different needs, whether it’s ensuring backward compatibility or leveraging modern layout capabilities.

Method 1: Using Floats

The float property is a traditional method that can be used to align div elements horizontally. Here’s how you can use it:

<div style="width: 100%; overflow: hidden;">
    <div style="width: 200px; float: left;">Left</div>
    <div style="margin-left: 210px;">Right</div>
</div>

Explanation: The first div is given a fixed width and floated to the left. The second div uses a margin to ensure it starts after the first div.
Best Use Case: Suitable for simple layouts where you need basic browser compatibility.

Method 2: Using Display as Table

This method mimics table behavior using CSS, making it useful for aligning elements without additional JavaScript:

<div style="width: 100%; display: table;">
    <div style="display: table-row">
        <div style="width: 200px; display: table-cell;">Left</div>
        <div style="display: table-cell;">Right</div>
    </div>
</div>

Explanation: The container and its children are styled to behave like a table, row, and cells.
Best Use Case: Useful for aligning elements in a more structured way without floats.

Method 3: Using Flexbox

Flexbox is a modern CSS layout model designed for building complex layouts easily:

.container {
    display: flex;
}
.fixed {
    width: 200px;
}
.flex-item {
    flex-grow: 1;
}

<div class="container">
  <div class="fixed">Fixed width</div>
  <div class="flex-item">Dynamically sized content</div>
</div>

Explanation: The container is set to display: flex, allowing its children to be arranged in a flexible manner. The second div uses flex-grow to fill the remaining space.
Best Use Case: Ideal for responsive layouts with automatic resizing capabilities.

Method 4: Using Inline-block

For simple horizontal alignment without floating, inline-block can be used:

<div style="display: inline-block;">
    Content in column A
</div>
<div style="display: inline-block;">
    Content in column B
</div>

Explanation: Both div elements are displayed as inline-blocks, allowing them to sit side by side like words in a sentence.
Best Use Case: Quick and easy alignment for simple layouts.

Method 5: Using CSS Grid

CSS Grid provides powerful layout capabilities, especially for complex designs:

.container {
    display: grid;
    grid-template-columns: 200px auto;
}

<div class="container">
    <div>Left</div>
    <div>Right</div>
</div>

Explanation: The container is set to display: grid with two columns defined, one fixed and the other flexible.
Best Use Case: Best for complex layouts requiring precise control over placement.

Conclusion

Each method has its strengths depending on your specific requirements. Floats are great for simple backward compatibility, while Flexbox and Grid offer modern solutions with responsive design capabilities. Choosing the right technique ensures efficient and effective webpage layouts tailored to various devices and browsers.