askvity

How to Make Divs in the Same Line in HTML?

Published in HTML CSS Layout 3 mins read

To make div elements appear in the same line in HTML, the most common and effective approach involves using CSS properties, particularly the display property. One straightforward method is applying display: inline-block;.

Using display: inline-block

This method allows you to place block-level elements, like divs, side by side while giving them some characteristics of inline elements.

As highlighted in the reference, you apply the display: inline-block property to all the div elements you want to display inline. The display:inline-block property will set all div elements side by side.

How it Works

  • Inline Behavior: Elements with display: inline-block flow horizontally like inline elements (e.g., <span>, <a>), allowing multiple to sit on the same line if space permits.
  • Block Behavior: Unlike standard inline elements, inline-block elements respect width, height, margin, and padding properties, giving you more control over their size and spacing.

Practical Example

Here's a simple example demonstrating how to use display: inline-block:

<!DOCTYPE html>
<html>
<head>
<title>Divs in Same Line</title>
<style>
  .inline-block-div {
    display: inline-block; /* Key property */
    width: 150px;         /* Example width */
    height: 100px;        /* Example height */
    margin: 10px;         /* Example spacing */
    background-color: lightblue;
    border: 1px solid blue;
    text-align: center;
    line-height: 100px; /* Vertically center text */
  }
</style>
</head>
<body>

  <h2>Example using display: inline-block</h2>

  <div class="inline-block-div">Div 1</div>
  <div class="inline-block-div">Div 2</div>
  <div class="inline-block-div">Div 3</div>

  <p>These divs are displayed side by side using <code>display: inline-block;</code>.</p>

</body>
</html>

In this example, each div with the class inline-block-div will be placed next to each other until the line is full, at which point the next div will wrap to the next line.

Advantages of display: inline-block

  • Simplicity: Relatively easy to understand and implement for basic side-by-side layouts.
  • Control: Allows setting width, height, and margins/padding for precise sizing and spacing.
  • Vertical Alignment: You can control vertical alignment using the vertical-align property (top, middle, bottom).

Considerations

  • Whitespace: Spaces, tabs, or newlines between inline-block elements in the HTML code can create a small gap between them. This can sometimes be addressed by removing the whitespace in the HTML or using CSS techniques like setting font-size: 0; on the parent container and resetting it on the children.
  • Responsiveness: While functional, more complex responsive layouts might be better handled with modern CSS layout methods like Flexbox or Grid.

By applying display: inline-block to your div elements, you effectively control their ability to sit horizontally alongside each other, making it a fundamental technique for creating inline layouts with block-level elements.

Related Articles