How to prevent a div from breaking to the next line

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.

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.

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.

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.

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.

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>