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

Forcing inline-block Elements on One Line

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 that has overflow-x: auto set to show horizontal scrollbars.
2. Have display: inline-block set on all child elements.

For example:

HTML:

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

CSS:

#parent {
    list-style: none;
    width: 100%;
    height: 90px;
    margin: 0;
    padding: 0;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

#parent > li {
    display: inline-block;
    width: 50%;
    height: 100%;
    background-color: red;
}

#parent > li:nth-child(even) {
    background-color: blue;
}

Forcing Floated Elements on One Line

This method works by having:

1. Three elements: a parent, a child wrapper, and child elements that will be floated.
2. A parent element that is used to constrain the children to a set width by setting a fixed-width and overflow: hidden to cut-off any overflowing child elements.
3. A child wrapper element that is set to a width larger than the parent element so that it overflows to allow enough space for the child elements to properly float horizontally on to the same line.
4. Child elements that are floated, and have a fixed-width (which does not exceed the child wrapper's width).

For example:

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

#parent {
    width: 300px;
    height: 90px;
    
    background-color: yellow;
    
    overflow-x: auto;
    overflow-y: hidden;
}

#childWrapper {
    list-style: none;
    width: 450px;
    height: 90px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#childWrapper > li {
    float: left;
    width: 150px;
    height: 90px;
    background-color: red;
}

#childWrapper > li:nth-child(even) {
    background-color: blue;
}

Please note that setting percentages on all three, parent, child wrapper and the child elements (li) may yield unwanted results as each element's width would be calculated with respect to the width of their respective containing blocks. If you want to make fluid boxes then it's best to use the display: inline-block technique explained earlier.