How to Force HTML Elements to Stay on the Same Line?

You can force all HTML elements to stay on the same line in the following ways:

• Using display: inline-block;
• Using Flexbox;
• Using Grid Layout;
• Using Floated Elements.

Using display: inline-block

To get all elements to appear on one line, the easiest way is to:

1. Set white-space property to nowrap on a parent element, and;
2. Have display: inline-block set on all children.

This means that at a minimum you only need the following style rules:

#parent { white-space: nowrap; }
.child { display: inline-block; }

Additionally, you may set the overflow-x: auto rule on the parent element if you want to show horizontal scrollbars for overflowing content.

To demonstrate how you can force all the child elements on the same line, consider for example, the following markup:

<div id="parent">
  <div class="child">Box #1</div>
  <div class="child">Box #2</div>
  <div class="child">Box #3</div>
</div>

You could, for example, style the elements in a manner similar to the following:

#parent {
  width: 100%;
  height: 90px;
  white-space: nowrap;
  overflow-x: auto;
}

.child {
  display: inline-block;
  width: 50%;
  height: 100%;
  background-color: aqua;
}

This will produce an output like the following:

In the example above, the width of the parent and child elements is set in percentage (to make it fluid), this can easily be changed to any other unit of measure. For example, you could use pixels (px) for fixed-width horizontally scrollable elements.

Please note that using display: inline-block may leave unwanted gaps between elements, however, there are ways you can remove those gaps.

Using Flexbox

Flexbox is a powerful layout module that allows you to control the arrangement of elements. By setting the display property of the parent container to flex, you can ensure that the child elements stay on the same line.

Consider, for example, the following markup:

<div id="parent">
  <div>Box #1</div>
  <div>Box #2</div>
  <div>Box #3</div>
</div>

By specifying display: flex on the parent, you can make all children appear on the same line:

#parent {
  display: flex;
}

By default, the elements will be packed together. You can control the spacing between these elements by specifying the justify-content property. For example, the following will evenly space out all children in the parent's available width:

#parent {
  display: flex;
  justify-content: space-between;
}

Additionally, you may set the overflow-x: auto rule on the parent element if you want to show horizontal scrollbars for overflowing content:

#parent {
  display: flex;
  width: 25%;
  justify-content: space-between;
  overflow-x: auto;
}

However, this will only show horizontal scrollbar if the flex items cannot be packed in the available space. You can also make it so that the children don't shrink when enough space is not available by specifying the flex-shrink: 0 style on children:

.child {
  flex-shrink: 0;
}

Additionally, you can specify the flex-basis property on the children to suggest the initial size of the flex items along the main axis. This determines the initial width (or height, depending on the flex-direction) of the flex item before any remaining space is distributed.

To make the flexbox keep width of children, and show horizontal scrolling for overflowing content, you could, for example, style the elements in a manner similar to the following:

#parent {
  display: flex;
  height: 90px;
  justify-content: space-between;
  overflow-x: auto;
}

.child {
  flex-basis: 50%; /* take 50% of initial space */
  flex-shrink: 0; /* do not shrink-to-fit when flex items larger than flex container */
  height: 100%;
  background-color: aqua;
}

This allows you to effectively enable horizontal scrolling on a flexbox, producing an output like the following:

Using Grid Layout

CSS Grid is a layout module that provides more complex grid-based layouts. By defining a grid container and specifying the grid template columns, you can force elements to stay on the same line.

For example, consider the following markup:

<div id="parent">
  <div>Box #1</div>
  <div>Box #2</div>
  <div>Box #3</div>
</div>

To create a grid layout with three columns, you can add the following style rule to the parent:

#parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* or `repeat(3, 1fr)` */
}

This will make all children appear on the same line. You can control the spacing between these columns by specifying the grid-gap property. For example, the following will add a gap of 10px between the columns:

#parent {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0 20px; /* row gap: 0, column gap: 10px */
}

Additionally, you may set the overflow-x: auto rule on the parent element if you want to show horizontal scrollbars for overflowing content:

#parent {
  display: grid;
  width: 25%;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 0 20px;
  overflow-x: auto;
}

However, this will only show horizontal scrollbar if the grid columns cannot be packed in the available space. To force the grid columns to overflow when they exceed the container's width, you can specify the grid-auto-flow: column style to add columns implicitly in the available space, as opposed to explicitly defining the number of columns using grid-template-columns. When you combine grid-auto-flow with grid-auto-columns property, you can make sure the overflowing content pushes beyond the container width whilst staying on the same line. For example:

#parent {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 50%;
  overflow-x: auto;
}

This will sequentially add columns in the available space in the grid container as needed, where each column will take up 50% of the available width.

Therefore, to make the grid layout keep width of children, and show horizontal scrolling for overflowing content, you could, for example, style the elements in a manner similar to the following:

#parent {
  display: grid;
  height: 90px;
  grid-gap: 0 20px;
  grid-auto-flow: column; /* place grid items in columns */
  grid-auto-columns: 50%; /* width of columns (50% of available width) */
  overflow-x: auto;
}

With grid-auto-flow: column, grid-auto-columns: 50%, and overflow-x: auto, the grid layout will arrange the items in columns, each taking up 50% of the available width, and provide horizontal scrolling when necessary. This effectively enables you to add horizontal scrolling to a CSS grid layout.

The code above will produce an output like the following:

Using Floated Elements

The CSS float property allows elements to float to the left or right, which can be used to keep elements on the same line. However, this method is less commonly used nowadays due to the introduction of flexbox and grid layouts.

This method requires you to set fixed widths and have, at a minimum, the following three elements:

1. Wrapper: to define the display area for the elements;
2. Parent: to define the width floated elements can occupy;
3. Children: the elements that would be floated.

For example, the markup of this would look something like the following:

<div id="wrapper">
  <div id="parent">
    <div class="child">Box #1</div>
    <div class="child">Box #2</div>
    <div class="child">Box #3</div>
  </div>
</div>

The wrapper element can be styled to define a "display area", for example, like so:

#wrapper {
  width: 300px;
  height: 90px;
  background-color: pink;
  overflow-x: auto;
}

Here, you can see that it has a fixed width and height with horizontal scrolling as needed.

Now, in the parent element you can define the width based on the number of child elements you wish to keep on the same line. For example, if you wanted to show two boxes in the display area from a total of three boxes, you would do something like the following:

#parent {
  width: calc(150px * 3);
  height: 100%;
  overflow: hidden; /* or any clear-fix snippet */
}

In the example above, 150px is half of 300px, which will allow you to accommodate two boxes in the display area. In this way, you can set the parent element's width to be equal to the width of all the child elements combined. This helps ensure that all floated elements stay on the same line.

If the child elements have margin and border applied, then you may either want to include those in the calculation of the parent's width or you can set box-sizing: border-box on the children.

As a final step, you simply need to float the children, and at a minimum, set the width on them, for example, like so:

.child {
  float: left;
  width: 150px;
  height: 100%;
  background-color: aqua;
}

This will produce an output like the following: