How to adjust text around a 'div/image'?

Asked

Viewed 451 times

4

I’m having trouble adjusting a text in a div who owns another div inside it, which sits at the top left.

Below is an image that explains better what I am wanting to do, I hope you can help me. Thank you.

inserir a descrição da imagem aqui

1 answer

7


You need to put the Div B floating inside the Div A and right after you put your text. As in this example:

.principal{width: 500px; height: 500px; text-align:justify; background:#ccc; color:#000; padding:10px}
.bloco{float:left; width: 150px; height: 150px; background:#fff; margin-right:10px}
<div class="principal">
  <div class="bloco"></div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel vestibulum velit. Pellentesque eu enim purus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nam placerat ligula id nulla congue, vitae vulputate diam ullamcorper. Praesent a quam maximus, feugiat nulla vitae, vehicula nisi. Integer ac nibh luctus, gravida elit sed, venenatis nisl. Integer suscipit metus ut volutpat dictum. Duis vestibulum sodales dictum. Ut sed felis a risus blandit facilisis non nec lacus. Quisque vitae vestibulum erat. Morbi iaculis lectus ut suscipit sagittis. Nunc cursus neque non leo venenatis, sit amet condimentum nibh molestie. Sed tortor nisl, tempor quis semper a, molestie sed nisi. Nam arcu sem, semper varius leo a, posuere maximus magna. Phasellus facilisis, velit vitae porta interdum, nisi massa auctor est, et accumsan elit quam nec elit. Pellentesque turpis dolor, varius vel sem vel, malesuada maximus eros.

Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi rutrum ex quis molestie pulvinar. Morbi laoreet nibh non sem venenatis hendrerit. Pellentesque augue turpis, hendrerit id lorem in, dignissim cursus lacus. Nulla quis porttitor est. Curabitur posuere et odio eu cursus. Integer sagittis, libero sit amet feugiat mattis, odio tortor cursus odio, id bibendum enim magna in urna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi porttitor sapien eget elit porttitor, a rhoncus tortor scelerisque. Pellentesque egestas leo dictum felis aliquet, vel semper sapien interdum. Etiam sed ex molestie, placerat ipsum sed, venenatis ex.
</div>

  • I get it, I was trying to adjust it with the postion:absolute;, that wasn’t working. Thank you.

  • 1

    In this case, if you use postion:absolute this property will ignore the property float. You can read more about the property float here.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.