Wrapping Text Around a Div with CSS

Text wrapping around a div

You just need to work with float property.

HTML:

<div>
    <img src="http://www.igta5.com/images/trailer-2-gtav-logo.jpg" alt="GTA V" />
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
</div>

CSS:

div img {
    width: 240px;
    float: right;
    padding: 25px;
}

Play with this on jsFiddle.

Update

With pure CSS, the most that you will get is manually spacing the sides of image with absolute positioning.

The HTML:

<div class="left">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<div class="right">
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<img src="http://www.igta5.com/images/trailer-2-gtav-logo.jpg" style="width: 240px; height: 140px;">

The CSS:

img {
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -125px;
    margin-top: 60px;
}

.left, .right {
    width: 49%;
}

.left {
    float: left;
}
.right  {
    float: right;
}

.left:before, .right:before {
    content: "";
    width: 125px;
    height: 200px;
}

.left:before {
    float: right;
}

.right:before {
    float: left;
}

Play with this on jsFiddle.

More information

You can find more information in this topic, on StackOverflow.

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

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.

Wrapping text around a div with CSS

Yep you got it. The #content-sidebar should be before all the texts which are supposed to wrap it. Like this:

<div id="cont-content">

<div id="content-sidebar">

 BLALALALALLAAL

 </div>

<p>content</p>

<p>more content</p>

  </div>

Wrap text around a div in html

If you want to keep the Absolute positioning you will need to re-structure some of your HTML. The simplest solution I could think of would be to put the .card-image Div in your left column like this:

<div class="card-left">
    Mr Joe Bloggs
    <div class="card-image"></div>
</div>

Then restructure your floating widths so the content doesn't overlap.

.card-left{
  width:65%;
  min-width: 200px;
  float:left;
}
.card-right{
  width:35%;
  float:left;
}

The only downside is if the card is less than 200px you will have extra space between your content but this way you get to keep the floated DIVs.

Wrap text around bottom left div?

Just add float: left;position: relative; to your element and add a spacer element like seen in the code below.

.bg {  width: 310px;  height: 200px;  background-color: #FCF2FF;  position: relative;  font-family: tahoma, arial;  font-size: 11px;  color: #772D99;}.title {  position: absolute;  left: 10px;  top: 5px;  text-align: left;  font-weight: bold;  font-size: 23px;  font-variant: small-caps;}.desc {  position: relative;  top: 35px;  left: 0px;  width: 115px;  height: 165px;  border: 1px dotted #B07ACC;  background-color: #FCF2FF;  padding: 3px;  box-sizing: border-box;}.pkmn {  margin-left: -3px;  margin-right: 3px;  padding: 3px;  width: 32px;  height: 32px;  border: 1px dotted #B07ACC;  border-radius: 100%;  background-color: #FCF2FF;}

<div class="bg">  <div class="title">Title Here</div>  <div class="desc">    <!-- I used CSS, but inline will serve well here -->    <div style="float: left; width: 0px; height: 120px"></div>    <div style="float: left; clear: left">      <img src="https://pfq-static.com/img/pkmn/q/4/r/8.png/t=1482399842" class="pkmn"/>    </div>    text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text  </div></div>

How to wrap a div containing text around a div containing an image?

Currently you have 2 different parent divs for the right-hand column, that is why the text doesn't wrap. What you need to do is put the image in the same div as the text, and then set float:left on the image, the text will just wrap automatically. You may also want to add a padding around the image so that the text doesn't go right up to the sides of it.

If you need the image to be in it's own div, just put that entire div(open and close tags) inside of the text div and it should have the same effect. Then just set float:left to the image div instead of the image itself.

Here's the one div solution:

HTML

<div id="column2">
    <img src="Images/poster.jpg" width="340" height="265" alt="poster">
    Praesent nisl urna, aliquam sit amet rhoncus condimentum
</div>

CSS

#column2 img {
    float:left;
    padding:5px;
}

And here's the two div solution:

HTML

<div id="column2">
    <div class="left">
        <img src="Images/poster.jpg" width="340" height="265" alt="poster">
    </div>
    Praesent nisl urna, aliquam sit amet rhoncus condimentum
</div>

CSS

.left {
    float:left;
    padding:5px;
}

How can I wrap text around a bottom-right div?

It sure seems to have been asked before (2003), and before (2002), or before (2005)

The last link actually suggest a javascript-based solution, but for a fixed (i.e. non fluid) solution.

It is consistent however, with other advices found

The only way to do that is to put the floated element somewhere in the middle of the text. It's impossible to get it perfect all of the time.

Or this one:

It consists of floating a vertical "pusher" element (such as img, but it's probably smarter to just use an empty div), then floating the desired object under it, using the clear property. The major problem with this method is you still have to know how many lines there are of text. It makes things MUCH easier though, and could definitely be coded with javascript, just need to change the height of the "pusher" to the height of the container minus the height of the float (assuming your container isn't fixed/min height).

Anyway, as discussed in this thread, there is no easy solution...

Cletus mentions in the comments this thread from 2003, which states once again the fact it can not easily be achieved.

However, it does refer to this Eric Meyer's article, which comes close to the effect you want to achieve.

By understanding how floats and the normal flow relate to each other, and understanding how clearing can be used to manipulate the normal flow around floats, authors can employ floats as a very powerful layout tool.

Because floats were not originally intended to be used for layout, some hacks may be necessary to make them behave as intended. This can involve floating elements that contain floats, "clearing" elements, or a combination of both.

Yet, Chadwick Meyer suggests in his answer a solution based on the :before CSS selector (variation of Leonard's answer).

It does work here.

Update Apr. 2021: Temani Afif suggests in his answer using Flexbox combined with a shape-outside.

But do check out the Backwards Compatibility of Flexbox, even though its support by all browsers is quite good.