How to Force the Content of the <div> Element to Stay on the Same Line

Solutions with the CSS overflow property

You can force the content of the HTML <div> element stay on the same line by using a little CSS. Use the overflow property, as well as the white-space property set to “nowrap”.

Example of forcing the content of the <div> element to stay on the same line:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        border: 1px solid #000;
        width: 60px;
        overflow: hidden;
        white-space: nowrap;
      }
    </style>
  </head>
  <body>
    <div>Lorem Ipsum</div>
  </body>
</html>

Try it Yourself »

Result

Lorem Ipsum

In the next example, we use three elements (<div>, <ul>, and <li>) that are floated and have a fixed width. The child wrapper is set to a width larger than the parent to allow the child elements to float horizontally on the same line.

Example of forcing the floated content of the <div> element to stay on the same line:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      #parent {
        width: 300px;
        height: 90px;
        background-color: #666;
        overflow-x: auto;
        overflow-y: hidden;
      }
      #childWrapper {
        list-style: none;
        width: 450px;
        height: 80px;
        margin: 0;
        padding: 0;
        overflow: hidden;
      }
      #childWrapper > li {
        float: left;
        width: 150px;
        height: 80px;
        background-color: #55c974;
      }
      #childWrapper > li:nth-child(even) {
        background-color: #d4ffdd;
      }
    </style>
  </head>
  <body>
    <div id="parent">
      <ul id="childWrapper">
        <li>Box 1</li>
        <li>Box 2</li>
        <li>Box 3</li>
      </ul>
    </div>
  </body>
</html>