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 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;
2. Have display: inline-block set on all child elements.

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

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

You could additionally set overflow-x: auto property 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: red;
}

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 Floated Elements

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: yellow;
    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:

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