Ensure that the div is set to start on a new line without causing any sudden jumps to the

Question

Ensure that the div is set to start on a new line without causing any sudden jumps to the

I have 3 divs that I want to display side by side. If the text inside each div gets too long, I would like it to break to a new line and have the next div stay beside it.

<div style="float: left;">This is some text</div>
<div style="float: left; text-decoration: underline;">It will continue in the next div</div>
<div style="float: left;">And this will be beside that</div>

I am looking to display the above divs like this (with the second div underlined):

This is some text that will continue
in the next div. And this will be beside
that.

html css

Answer 1

Answer №1

Typically, a div element is set to have a display attribute value of block, causing it to occupy its own line in the document. To have them appear next to each other, you can change the value to inline or inline-block (if you want to specify 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 the purpose of having separate elements is simply to underline text in the second div, it might be more efficient to use a span instead. This way you can avoid the hassle of removing styles from the divs and ensuring they won't be affected by 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>

Answer 2

Typically, a div element is set to have a display attribute value of block, causing it to occupy its own line in the document. To have them appear next to each other, you can change the value to inline or inline-block (if you want to specify 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 the purpose of having separate elements is simply to underline text in the second div, it might be more efficient to use a span instead. This way you can avoid the hassle of removing styles from the divs and ensuring they won't be affected by 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>

Ensure that the div is set to start on a new line without causing any sudden jumps to the

Answer №1

Similar questions

Transitioning one element's opacity to zero while concurrently increasing another element's opacity to replace it

The use of backdrop-filter results in artifacts appearing in rounded corners

Break down the text of a paragraph into separate words, placing each word within its own span element, and then add animations

Limiting ng-repeat in AngularJS when the last item on the object is reached

The inline display property does not function properly with the <li> element

stream a song with a font awesome symbol

Outputting PHP code as plain text with jQuery

Make a line break occur automatically after every 7 divs are displayed

Another choice for object-fit:contain workaround for IE

Optimizing mobile page layouts with CSS

What is the most efficient way to transform HTML into React components effortlessly?

Perform a search within an iframe

Trouble arises when trying to link IE7 with jQuery

Creating an HTML file using PUG in a local environment (using npm and gulp)

Arranging particular placement

Retrieve a specific string located within a <div> element by utilizing XPath

Div I add to page is not being styled by CSS

What causes the code following the </html> tag to be shifted in front of the </body> tag? Is there a noticeable improvement in performance

What is the best way to expand the navigation bar: should I add a side div or incorporate a background image?

I'm not entirely sure why I keep getting the error message stating "Cannot read property 'innerHTML' of null"