because the floated red div is taken out of the document flow and although the text surrounds the floated red div, the margin is still calculated against the parent col-6
which has the width of 100% (display:block) of the mainInfo
). So you have to set the margin-left
larger than the width of the floated red div (which is 300px
). In this case you may have to set the margin-left
to 400px
:
.col-6 .about {
display: block;
margin-left:400px;
padding:1em;
}
I added this answer to show that the margin-left
still works. You can also set the margin for the floated red div instead (like JunM posted as a comment).
Here is the updated demo.