Skip to content
Related Articles

Related Articles

How to make div elements display inline using CSS ?

View Discussion
Improve Article
Save Article
  • Last Updated : 20 Jun, 2022

In this article, we will learn the different approaches to making div elements display inline. This will allow them to take available space horizontally on the screen in a line.

First, we will create a basic HTML code for the div elements and apply different CSS styling to make it display inline.

CSS properties:

In this article, we will use below CSS properties.

  • Display: We will use display: flex and display: inline-block property to show div elements inline.
  • Float: We will use the float: left property to show div elements side by side.

Approach 1: In this approach, we have set the display: flex and flex-direction: row to the parent div of all the div elements. Due to the flex-direction: row property all the elements inside the parent div will be shown in a single row.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        .main {
              display: flex;
            flex-direction: row;
            font-size: 30px;
            color: green;
            border: 4px dashed green;
            padding: 5px;
            width: 400px;
        }
  
        .main div {
            border: 2px solid red;
            margin: 10px 20px;
            width: 100px;
        }
    </style>
</head>
  
<body>
    <div class="main">
        <div>Geeks</div>
        <div>for</div>
        <div>Geeks</div>
    </div>
</body>
  
</html>

Output:

 

Users can see that all div elements inside the parent div are displaying inline.

Approach 2: In this approach, we will apply display: inline-block property to all the div which we need to display inline. The display:inline-block property will set the all div elements side by side.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        div {
            display: inline-block;
            color: green;
            border: 2px solid red;
            margin: 10px 20px;
            width: 120px;
            font-size: 40px;
        }
    </style>
</head>
  
<body>
    <div>Geeks</div>
    <div>for</div>
    <div>Geeks</div>
</body>
  
</html>

Output: 

 

Users can see all div elements displaying inline. 

Approach 3: In this approach, we will apply the float: left property to all the div elements to display them inline. Also, users can use the float: right CSS property if they want to show all div elements in the reverse order from the right side.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        div {
            float: left;
            color: green;
            border: 2px solid red;
            margin: 10px 20px;
            width: 120px;
            font-size: 40px;
        }
    </style>
</head>
  
<body>
    <div>Geeks</div>
    <div>for</div>
    <div>Geeks</div>
</body>
  
</html>

Output: 

 

Users can see in the below output image how all div elements look when we apply the float: left CSS property to all div elements.

Approach 4: In this approach, we will use the span element instead of the div element. When the user needs to write only text inside the div tag, they can use the span tag as all span elements render inline by default.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <style>
        span {
            color: green;
            border: 2px solid red;
            margin: 10px 20px;
            width: 100px;
            font-size: 30px;
        }
    </style>
</head>
  
<body>
    <span>Geeks</span>
    <span>for</span>
    <span>Geeks</span>
</body>
  
</html>

Output: In the below output image, users can see how the span element renders inline.

 

In the below output image, users can see how the span element renders inline.


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!