How to prevent a div from breaking to the next line

Updated: 06/27/2017 by Computer Hope

HTML div tagAn HTML <div> or division is a block-level element that is designed not to display any HTML elements next to it unless its default behavior is changed. Below are all of the different methods of preventing a div from breaking to the next line.

Tip: Depending on why you want to break a div you may also want to consider using a <span> tag, which is an inline-level element and does not break to the next line unless its default behavior is changed.

Note: To make these examples easier to use and understand for all types of computer users we're using the style attribute in the div. If you intend to use any of these examples or anything similar to these examples on multiple pages we highly recommend creating a cacheable CSS file with the style settings in the file.

In our examples below, we will be showing the divs as different colors to help illustrate how much spacing the div is occupying and where on the screen the div is placed.

Default <div> behavior

Below is an example of the default div behavior of the block element Div One occupying the first line of its containing element followed by the second Div Two.

Div One
Div Two

HTML code

<div style="padding: 50px; background-color: #BCC6CC;">Div One</div>
<div style="padding: 50px; background-color: #E5E4E2;">Div Two</div>

Set size and make inline

Even if you were to reduce the size of a Div One to make room for the other div, because they are block elements you would be left with space next to Div One and Div Two below Div One. To move the div up to the next line both div's need to have the inline-block display setting as shown below.

Div One
Div Two


HTML code

<div style="padding: 50px; background-color: #BCC6CC; width: 100px; display: inline-block;">Div One</div>
<div style="padding: 50px; background-color: #E5E4E2; display: inline-block;">Div Two</div>

Creating a three column div

Below are a few different examples of a three column div. First, the below three column div follows the same idea as the above examples except it adds a div.

Div One
Div Two
DIV THREE

HTML code

<div style="padding: 50px; background-color: #BCC6CC; display: inline-block;">Div One</div>
<div style="padding: 50px; background-color: #E5E4E2; display: inline-block;">Div Two</div>
<div style="padding: 50px; background-color: #98AFC7; display: inline-block; margin-bottom: 2em;">DIV THREE</div>

Of course if you want the divs to occupy 100% of the containing element it gets a little trickier. Below is one example of how you can create three div's next to each other that occupy 100% of the element. In the example below instead of keeping all div's on the same line using inline-block we are floating the left and right div.

Div One
DIV THREE
Div Two


HTML code

<div style="background-color:#BCC6CC;float: left;width: 200px;padding: 50px">Div One</div>
<div style="background-color:#98AFC7;float: right;padding: 50px">DIV THREE</div>
<div style="background-color:#E5E4E2;float: none;overflow: hidden;padding: 50px">Div Two</div>

Tip: Although the above example of a three div column is responsive additional customization such as hiding DIV THREE and adjusting the widths can also be added to the style.

Additional information