Open In App

How to float three div side by side using CSS?

Last Updated : 29 Nov, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we are going to learn how to float three divs side by side using CSS. Three or more different divs can be put side-by-side using CSS. Use the CSS property to set the height and width of the div and use the display property to place the div in a side-by-side format.

These are the following ways to solve this problem:

Using float property

  • In this approach, we will use float property.
  • These are the values that can be used to align divs:
    • float: left; This property is used for those elements(div) that will float on the left side.
    • float: right; This property is used for those elements(div) that will float on the right side.
  • we will use the property for the alignment.

Example: This example places three divs side by side using the float property. 

html




<!DOCTYPE html>
<html>
 
<head>
 
    <!-- CSS property to place div
            side by side -->
    <style>
        #leftbox {
            float: left;
            background: Red;
            width: 25%;
            height: 280px;
        }
 
        #middlebox {
            float: left;
            background: Green;
            width: 50%;
            height: 280px;
        }
 
        #rightbox {
            float: right;
            background: blue;
            width: 25%;
            height: 280px;
        }
 
        h1 {
            color: green;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <div id="boxes">
        <h1>GeeksforGeeks</h1>
 
        <div id="leftbox">
            <h2>Learn:</h2>
            It is a good platform to learn programming.
            It is an educational website. Prepare for
            the Recruitment drive of product based
            companies like Microsoft, Amazon, Adobe
            etc with a free online placement preparation
            course.
        </div>
 
        <div id="middlebox">
            <h2>GeeksforGeeks:</h2>
            The course focuses on various MCQ's & Coding
            question likely to be asked in the interviews
            & make your upcoming placement season efficient
            and successful.
        </div>
 
        <div id="rightbox">
            <h2>Contribute:</h2>
            Any geeks can help other geeks by writing
            articles on the GeeksforGeeks, publishing
            articles follow few steps that are Articles
            that need little modification/improvement
            from reviewers are published first.
        </div>
    </div>
</body>
 
</html>


Output:

Using display property

  • In this approach, we will use the display property.
  • These are the values tthat can be used for the alignment:
    • display:table; This property is used for elements (div) which behaves like table.
    • display:table-cell;This property is used for elements (div) which behaves like tc.
    • display:table-row;This property is used for elements (div) which behaves like tr.
  • We will use this for alignment.

Example: Another way to put three div side by side by using display property.

html




<!DOCTYPE html>
<html>
 
<head>
 
    <!-- CSS style to place three div side by side -->
    <style>
        .container .box {
            width: 540px;
            margin: 50px;
            display: table;
        }
 
        .container .box .box-row {
            display: table-row;
        }
 
        .container .box .box-cell {
            display: table-cell;
            width: 33%;
            padding: 10px;
        }
 
        .container .box .box-cell.box1 {
            background: green;
            color: white;
            text-align: justify;
        }
 
        .container .box .box-cell.box2 {
            background: lightgreen;
            text-align: justify
        }
 
        .container .box .box-cell.box3 {
            background: lime;
            text-align: justify;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
        <div class="container">
            <div class="box">
                <div class="box-row">
                    <div class="box-cell box1">
                        It is a good platform to learn programming.
                        It is an educational website. Prepare for
                        the Recruitment drive of product based
                        companies like Microsoft, Amazon, Adobe etc
                        with a free online placement preparation
                        course.
                    </div>
 
                    <div class="box-cell box2">
                        The course focuses on various MCQ's &
                        Coding question likely to be asked in
                        the interviews & make your upcoming
                        placement season efficient and successful.
                    </div>
 
                    <div class="box-cell box3">
                        Any geeks can help other geeks by writing
                        articles on the GeeksforGeeks, publishing
                        articles follow few steps that are Articles
                        that need little modification/improvement
                        from reviewers are published first.
                    </div>
                </div>
            </div>
        </div>
    </center>
</body>
 
</html>


Output:



Previous Article
Next Article

Similar Reads

How to place two div side-by-side of the same height using CSS?
The two or more different div of same height can be put side-by-side using CSS. Use CSS property to set the height and width of div and use display property to place div in side-by-side format. The used display property are listed below: display:table; This property is used for elements (div) which behaves like table.display:table-cell; This proper
2 min read
How to place SVG icons on a round circle side by side to another div using Bootstrap?
Bootstrap Icons are SVGs, so they scale quickly and easily and can be styled with CSS. Approach: We can place the SVG icons and give them the shape of a circle. This will make the SVG icons appear to be in a circular shape. This can be achieved using a Bootstrap class called "rounded-circle" Syntax: &lt;img class = "rounded-circle" src = "..." alt
2 min read
How to overlay one div over another div using CSS
Creating an overlay effect simply means putting two div together at the same place but both the div appear when needed i.e while hovering or while clicking on one of the div to make the second one appear. Overlays are very clean and give the webpage a tidy look. It looks sophisticated and is simple to design. Overlays can create using two simple CS
2 min read
How to Make a Child Div Element Wider than Parent Div using CSS ?
When the child div element has a fixed width that is wider than the parent div element, it will display overflow outside of the parent element. Because the overflow is hidden by default, one approach is to utilize the overflow attribute to enable it on an element. Another approach includes setting the position property of the parent div element to
2 min read
Server Side Rendering vs Client Side Rendering vs Server Side Generation
In the world of web development, there are several approaches to rendering web pages: server-side rendering, client-side rendering, and server-side generation. Each approach has its own advantages and disadvantages, and choosing the right one for your project depends on your specific needs and goals. In this blog, we’ll explore the differences betw
4 min read
How to create three boxes in the same div using HTML and CSS ?
We can place three or more different divs side by side in the same div using CSS. You can achieve this using Flexbox, but you need to use wrapper divs and apply different flex directions to each of them to make the grid layout work. You can set the height and width of the div by using CSS properties. Syntax:flex: flex-grow flex-shrink flex-basis |
3 min read
How to copy the content of a div into another div using jQuery ?
Given an HTML document containing some div element and the task is to copy a div content into another div as its child using jQuery. There are two approaches to solve this problem that are discussed below: Approach 1: First, select the div element which needs to be copied into another div element.Select the target element where the div element is c
2 min read
How to force child div to be 100% of parent div's height without specifying parent's height?
When designing a website, you may want to create a layout where a child div element fills up the height of its parent div element. However, you may not know the exact height of the parent div element and you don't want to specify it. In this article, we will explore different approaches to force a child div element to be 100% of its parent div elem
4 min read
How to center a div within another div?
The div tag is used to construct a division or section of an HTML document in which other elements of HTML is placed and that division/section works like a container whose CSS styling can be done as a single unit or javascript can be used to perform various tasks on that container. Syntax: &lt;div&gt; &lt;h3&gt;'This is a div of the web page.&gt;/h
4 min read
How to center a div on the edge of another div in SASS ?
In this article, we will see how to centre a div on the edge of another div using SASS. SASS is an extension of CSS that stands for Syntactically Awesome Style Sheets. It helps us to create things like variables, nested rules, etc. So that we can reuse the code. Centering a div on the edge of another div is not a difficult task. We can achieve it b
4 min read
Article Tags :