How to float three div side by side using CSS?

Last Updated : 02 Jul, 2025

Aligning three <div> elements side by side is a fundamental layout technique in web design. Whether you're creating a profile card section, a features row, or a three-column layout for a homepage, placing elements in a horizontal line is a common requirement.

While the traditional approach relies on the float property, modern CSS offers cleaner and more flexible solutions like Flexbox and Grid that make layouts easier to build and maintain.

Method 1: Using float

Using the float property, you can align elements horizontally by applying float: left or float: right to each element. This causes the elements to float next to each other in a row, allowing them to stack side by side within the container.

index.html

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      width: 100%;
      overflow: hidden; /* Clearfix alternative */
    }

    .box {
      float: left;
      width: 33.33%;
      height: 280px;
      padding: 15px;
      color: white;
      box-sizing: border-box;
    }

    .red { background-color: red; }
    .green { background-color: green; }
    .blue { background-color: blue; }

    h1 {
      text-align: center;
      color: green;
    }
  </style>
</head>
<body>
  <h1>GeeksforGeeks</h1>
  <div class="container">
    <div class="box red">
      <h2>Learn:</h2>
      GeeksforGeeks is a great platform to learn programming and prepare for interviews at top tech companies.
    </div>
    <div class="box green">
      <h2>GeeksforGeeks:</h2>
      The site offers free and premium content including MCQs and coding questions to help you ace placements.
    </div>
    <div class="box blue">
      <h2>Contribute:</h2>
      You can also write and contribute articles to the platform, helping fellow learners grow.
    </div>
  </div>
</body>
</html>

Output:

Using Float

Method 2: Using display (Flexbox ,Grid, Inline-block)

Modern CSS layout techniques allow elements to be aligned side by side using the display property. You can achieve this using:

display: flex – creates a flexible row-based layout that adapts to screen size and spacing needs.
display: inline-block – places elements next to each other like inline content while retaining block-level styling.
display: grid – offers powerful control over both rows and columns, making it ideal for two-dimensional layouts.

Each method has its own use case depending on the complexity and responsiveness of your layout.

index.html

<!DOCTYPE html>
<html>
<head>
  <style>
    .container {
      display: flex;
      gap: 10px;
      padding: 20px;
    }

    .box {
      flex: 1;
      padding: 15px;
      height: 280px;
      color: white;
      text-align: justify;
      box-sizing: border-box;
    }

    .red { background-color: red; }
    .green { background-color: green; }
    .blue { background-color: blue; }

    h1 {
      text-align: center;
      color: green;
    }
  </style>
</head>
<body>
  <h1>GeeksforGeeks</h1>
  <div class="container">
    <div class="box red"><h2>Learn:</h2> Access tutorials, articles, and videos on programming and computer science topics.</div>
    <div class="box green"><h2>Practice:</h2> Sharpen your skills with coding problems, quizzes, and interview questions.</div>
    <div class="box blue"><h2>Contribute:</h2> Join the GFG community by submitting articles and helping others grow.</div>
  </div>
</body>
</html>

Output:

using-display-property — Using display: flex

Conclusion

Lining up three <div>s side by side is easy once you know the right tools. While float used to be the go-to method, today we have better options like flexbox and grid that are simpler, cleaner, and responsive by default. For most layouts, Flexbox is your best friend—it's flexible, easy to use, and works great across devices.

You May Also Try

S

Sabya_Samadder

Improve

Article Tags :

Similar Reads

How to Blur an Image using CSS?

In CSS, the filter property is used to apply visual effects to images, such as blurring, grayscale, brightness adjustments, and more. One common use of the filter property is to apply a blur effect to an image, giving it a soft, out-of-focus appearance.Syntax:filter: blur(radius);radius: Defines the

How to make an image center-aligned (vertically & horizontally) inside a bigger div using CSS ?

We will know how to center-align the image in a div tag using CSS & will also understand its implementation through the example. Given an image, we need to set the image that align to the center (vertically and horizontally) inside a bigger div. But first let's create a basic structure, in which

What does the CSS rule â€œclear: bothâ€ do?

The clear property is used to specify which side of floating elements are not allowed to float. It sets or returns the position of the element about floating the objects. The "clear: both" means floating the elements are not allowed to float on both sides. It is used when no need for any element to

How to Break Line Without using <br> Tag in HTML / CSS?

Breaking lines in HTML without <br> tags can be achieved using block-level elements such as <div> or <p> combined with CSS properties like display: block; or display: inline-block; and others. These elements naturally wrap text or content, facilitating clean and structured layout d

Set the size of background image using CSS ?

Setting the size of a background image using CSS allows you to control how the image fits within an element. By using the background-size property, you can specify the width and height, ensuring the image scales appropriately for responsive design. Syntax: background-size: width height;Note: If the

What is Greater-than Sign (>) Selector in CSS?

In CSS, the greater than sign (>) is known as the child combinator selector. It is used to style elements that have a specific parent. Unlike other selectors, it only targets direct children of an element, meaning it only looks one level down in the HTML structure.How the Child Combinator Selecto

How to Select all Child Elements Recursively using CSS?

Here are three methods to achieve to Select all Child Elements Recursively using CSS:1. Using the Universal Selector (*)The universal selector applies styles to all child elements within a parent recursively.HTML<html> <head> <style> .parent * { color: blue; font-weight: bold; }

How to style a checkbox using CSS ?

Styling a checkbox using CSS involves customizing its appearance beyond the default browser styles. This can include changing the size, color, background, and border, and adding custom icons or animations. Techniques often involve hiding the default checkbox and styling a label or pseudo-elements fo

CSS word-break vs word-wrap (Overflow Wrap) : What's the Difference ?

In CSS, controlling how long words break at line endings is crucial for clean layouts and good readability. Two properties often confused are word-break and overflow-wrap also known as word-wrap. This guide compares how they handle text overflow and when to use each.word-break Vs. word-wrapPropertyw

How to make div height expand with its content using CSS?

When designing a webpage, it's important to make sure a div adjusts its height based on the content inside it. This is key to creating a flexible and responsive layout, especially when the content changes or is unpredictable. Using CSS, you can easily make a div adapt to different content sizes. One