0

I've created a text, and added some left floated boxes to it. But for some reason, they behave differently. The first box breaks the line before it, but the second one doesn't. I don't understand, why. JSFiddle: https://jsfiddle.net/qt9q7dn4/

(thie green colored texts are the words after the red boxes)

test

CSS:

div {
    width: 50px;
    height: 50px;
    background: red;
    float: left;
    margin: 5px;
}

.after {
    color: lime;
    font-weight: bold;
}

HTML:

<p>Lorem 
<div></div> 
<span class="after">ipsum</span> 
dolor sit amet, consectetur adipiscing elit. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.In magna ante, luctus sit amet nulla eget, gravida convallis nisi. Curabitur et blandit felis, 
<div></div> 
<span class="after">vitae
</span> facilisis nibh. Integer eu eros 
vitae est tristique tincidunt quis pulvinar mi. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.</p>
Paul Ruet
  • 18
  • 1
  • 6
Iter Ator
  • 8,226
  • 20
  • 73
  • 164
  • `

    ` is **not** valid markup.     – Scott Sep 01 '16 at 20:58
  • 2
    (For more on that, see the excellent answer to http://stackoverflow.com/questions/8397852/why-p-tag-cant-contain-div-tag-inside-it) – henry Sep 01 '16 at 21:02
  • Your `
    ` floats, but that doesn't mean your `

    ` will be interupted. You could start a new paragraph tag in which you start with your floating div.

     – meavo Sep 01 '16 at 21:05

1 Answers1

0

Move the divs outside the paragraphs and close the paragraphs.

<div></div>

<p>Lorem  <span class="after">ipsum</span> dolor sit amet, consectetur adipiscing elit. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.In magna ante, luctus sit amet nulla eget, gravida convallis nisi. Curabitur et blandit felis, </p>

<div></div> 

<p><span class="after">vitae</span> facilisis nibh. Integer eu eros vitae est tristique tincidunt quis pulvinar mi. Duis sed nibh gravida, euismod leo ultrices, auctor nulla. Fusce nunc ante, condimentum in ex sit amet, pharetra vestibulum urna. Morbi vitae bibendum enim, vitae congue eros. Sed dignissim magna id tincidunt posuere.</p>

Fiddle

Scott
  • 21,475
  • 8
  • 43
  • 55