How to prevent a div from breaking to the next line

Updated: 11/12/2023 by Computer Hope
HTML div tag

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

Tip

Depending on why you want to break a div, also consider a <span> tag. It 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 on multiple pages, we highly recommend creating a cacheable CSS (Cascading Style Sheets) file with the style settings in the file.

Below, we show the divs as different colors to help illustrate how much space they occupy where they're placed on the screen.

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

Because they're block elements, when reducing the size of Div one to make room for the other div, you're 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 divs next to each other that occupy 100% of the element. In the example below, instead of keeping all divs 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 example above of a three div column is responsive, additional customization, such as hiding Div three and adjusting the widths, can also be added.