The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Two consecutive <div> elements already start on separate lines in normal document flow: a div generates a block box, so the next block is laid out below it. If they appear side by side, a CSS rule or the parent’s layout context is changing that behavior. Inspect the computed styles, then apply the fix that matches the layout.
When normal block flow is the right fix
In ordinary horizontal writing mode, an element with display: block occupies its own line and causes the following block box to begin below it. The HTML tag alone does not guarantee that appearance, because CSS can change an element’s display value. See MDN’s display property reference and MDN’s guide to block and inline layout.
As an Amazon Associate I earn from qualifying purchases.
<div class="item">First</div>
<div class="item">Second</div>.item {
display: block;
}Remove rules such as display: inline or display: inline-block if those elements should form a vertical sequence. Also check whether a float or positioning rule is taking an element out of normal flow.
If the parent is a flex container
A parent with display: flex establishes a flex layout for its direct children. Flexbox uses row as its default direction, which places the two divs next to each other. Set the parent to a column direction to stack them:
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.container {
display: flex;
flex-direction: column;
}
.item {
display: block;
}flex-direction: column lays flex items along the container’s block axis. The property’s behavior and values are documented in MDN’s flex-direction reference.
If the parent is a grid container
A parent with display: grid uses grid tracks and item placement rather than ordinary block-flow sibling rules. Inspect the grid definition and placement in DevTools. For a simple one-column layout, define one column:
.container {
display: grid;
grid-template-columns: 1fr;
}If explicit grid-column, grid-row, or multiple columns place the items side by side, adjust those declarations instead of adding a line-break element.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Quick browser-DevTools diagnosis
- Select the first
divand the seconddivin the Elements panel. - In Computed styles, check each element’s
display,float, andpositionvalues. - Inspect the immediate parent’s computed
display. If it isflex, checkflex-direction; if it isgrid, inspect columns, rows, and placement. - Disable suspicious rules one at a time. The layout should return to a vertical stack when the rule changing participation or placement is removed.
Why adding <br> is usually the wrong solution
The <br> element represents a meaningful line break inside text, such as a postal address or a poem. It is not a general-purpose layout control. Use the layout system—block flow, flexbox, or grid—to position separate containers. MDN describes the element at https://developer.mozilla.org/en-US/docs/Web/HTML/Element/br.
Common causes and matching fixes
| What you find | Why the DIVs are side by side | Appropriate fix |
|---|---|---|
display: inline or inline-block |
The elements participate in an inline formatting context. | Restore display: block or remove the overriding rule. |
Parent has display: flex |
Flexbox defaults to a horizontal row. | Set flex-direction: column on the parent. |
Parent has display: grid |
Grid tracks or explicit placement use separate columns. | Use one column or correct the grid item placement. |
| Float declarations | Floats allow later content to flow alongside them. | Remove the float or clear it where appropriate. |
| Absolute or fixed positioning | The element is removed from normal flow. | Use normal flow, or deliberately set non-overlapping offsets. |
Minimal examples
Normal flow
<div class="box">One</div>
<div class="box">Two</div>
.box {
display: block;
}Vertical flex layout
<div class="stack">
<div>One</div>
<div>Two</div>
</div>
.stack {
display: flex;
flex-direction: column;
}The original SitePoint thread’s code is unavailable, so no single original cause can be identified. The parent layout and computed styles determine which branch applies.
Quick Recap
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
