How to align 3 divs (left/center/right) inside another div?

html

responsive-design

floats

css

byAlex Kataev·Nov 8, 2024

Make use of CSS Flexbox to align your three divs (left/center/right) within another div. Apply display: flex; justify-content: space-between; to the parent div. This strategy evenly spreads the child divs across the available space, maintaining space harmony.

<div style="display: flex; justify-content: space-between;">
  <!-- There's no place like <div> -->
  <div>Left</div>
  <div style="text-align: center;">Center</div>
  <div style="text-align: right;">Right</div>
</div>

Using Flexbox, you persist absolute control over each element's positioning: left-aligned, centered, and right-aligned. This process gives you an adaptive, streamlined layout.

Floats: the fallback squad

In instances where you require a robust float-based layout to satisfy the demands of older browsers or specific design restrictions, follow the strategy below. Crucially, the left and right divs should float and they must precede the center div in your HTML. To regulate the layout intact, don't forget to employ a clearfix div.

<div class="container">
  <div class="left" style="float: left;">Left</div> <!-- Are we drifting yet? -->
  <div class="right" style="float: right;">Right</div> <!-- Keep right, road construction ahead -->
  <div class="center" style="text-align: center; margin: 0 auto;">Center</div> <!-- Welcome to the center of the universe -->
  <div style="clear: both;"></div> <!-- Clean up aisle 3! -->
</div>

Heads up: You need to ascertain the total width of all child elements in your div garden isn’t overshooting the width of their parent div.

Embracing responsive design

When embarking on a responsive design journey, don't forget to consider percentage-based widths and incorporate media queries:

.left, .right {
    width: 25%; /* Consider this negotiation space */
    float: left;
}

.center {
    width: 50%; /* This is the room to stretch your legs */
    margin: 0 auto;
    float: none;
}

@media (max-width: 768px) { <!-- This is no country for wide screens -->
    .left, .right {
        float: none;
        width: auto;
    }
}

This set-up will graciously stack elements on smaller screens, thus upholding usability.

Building for compatibility

Although Flexbox enjoys extensive support, some older browsers may frown at it. To ensure harmony, use Autoprefixer for handling vendor prefixes. Also note that IE versions below 10 don’t speak the Flexbox language. In these situations, either float-based or display: table; methods can come to the rescue.

Keeping HTML/CSS efficient

Preserving a clean and minimal HTML structure is key. Make substantial changes in your CSS, not HTML. This approach will ensure your markup stays semantic and uncomplicated, exploiting CSS for layout fine-tuning.

Table display: the old school way

In some situations, a traditional tabular layout using display: table; might be the perfect fit:

.container {
    display: table;
    width: 100%;
}

.left, .center, .right {
    display: table-cell;
    text-align: center; /* Align text sniper-accurate */
}