CODEWITHSUNDEEP
csshtmltextcss-float
Igor Parra
Igor Parra

Reputation: 10348

Wrapping text around a div (in the middle of the text) using css

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...]

Upvotes: 6

Views: 12681

Answers (3)

chipcullen
chipcullen

Reputation: 6960

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.

Upvotes: 7

Undefined
Undefined

Reputation: 11431

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

Upvotes: 3

Simon Dorociak
Simon Dorociak

Reputation: 33505

what you need is the float property. Try this example below:

.youDiv {
float: left;
}

Upvotes: 2

Related Questions