An HTML
Below, we show the divs as different colors to help illustrate how much space they occupy where they’re placed on the screen.
Depending on why you want to break a div, also consider a tag. It is an inline-level element and does not break to the next line unless its default behavior is changed.
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 file with the style settings in the file.
DefaultbehaviorBelow 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 oneDiv twoSet 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 oneDiv twoCreating 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 oneDiv twoDiv threeOf 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 OneDIV THREEAlthough 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.
Related information
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
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.
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.
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.
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.
