Menu
How can I wrap a text around a div. Leaving the div at the middle of the text body using css?
Sketch:
text text text text
text text text text
text text text text
text text text text
+-------+ text text
+ + text text
+ div + text text
+ + text text
+-------+ text text
text text text text
text text text text
text text text text
text text text text
NOTE: From the HTML point of view, the div goes before the text.
<div></div> [... text...]
506
If you've faced the situation when you need to wrap words in a <div>, you can use the white-space property with the "pre-wrap" value to preserve whitespace by the browser and wrap the text when necessary and on line breaks. Also, you'll need the word-wrap property.
CSS word-wrap property is used to break the long words and wrap onto the next line. This property is used to prevent overflow when an unbreakable string is too long to fit in the containing box.
Today I'm going to talk about a rarely used but extremely useful CSS property, the word-wrap. You can force long (unbroken) text to wrap in a new line by specifying break-word with the word-wrap property.
The other answers are correct in that you'll need to float the <div> (e.g. div { float: left; margin: 10px 0 10px 10px; }, however, keep in mind that in order for the <div> to appear in the middle of you content, it will have be in the content itself.
When using a float like this, you have to just remember that you have to insert the <div> right before the content that you want to wrap around it. So, in this case, have a paragraph of text, insert the <div>, then have a couple more paragraphs. When you float the <div>, it will appear in the middle of your content.
71
You need to float your div. For example you could style the div like this:
float:left;
margin:10px; //To leave a gap around the div
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
