Make div to continue to new line not jumping to new line

Question

I have 3 divs, I want to keep those side by side but if the text inside each div goes long, break the text to a new line and keep the next div beside that.

<div style="float: left;">this is a text</div>
<div style="float: left; text-decoration: underline;">Will continue in next div</div>
<div style="float: left;">and this will be beside that</div>

I want to show above divs like this (the second div should have underline)

this is a text that will continue
in next div and this will be beside
that

I'm not getting the output you describe. As expected, the elements are next to each other horizontally, not vertically. Please clarify what your expected result looks like. — connexo, Apr 27 '21 at 20:24
@connexo Sorry, I edited my question to make it clear. That is what I want to get. — Mohammad Taherian, Apr 27 '21 at 20:26
Now your description above the code and the expectation you state under the code contradict each other. — connexo, Apr 27 '21 at 20:27

D M · Accepted Answer · 2021-04-27T21:40:11.033

By default, a div element has a display attribute value of block which will place it on its own line in the document. If you want them to be side-by-side, you can set the value to inline or inline-block (if you want to set a width/height).

div {
  font-size: 4rem;
  display: inline;
}

#second {
  text-decoration: underline;
}

<div>This text is in the first div element and</div>
<div id="second">continues into the second div element and</div>
<div>finishes in the third div element.</div>

If all you need the separate elements for is to underline the text in the second div, then I'd suggest you use a span instead to avoid the headache of removing styles from the divs and remembering to exclude them from any future CSS selectors.

div {
  font-size: 4rem;
}

.underline-me {
  text-decoration: underline;
}

<div>This text is all in one div element <span class="underline-me">even though this part is underlined</span> so it will flow without needing to change the display property</div>

Make div to continue to new line not jumping to new line

1 Answers1