Wrap text around a div in html

Question

Seeing as i can't use 'float' and 'absolute' in my title,

I have a couple of divs nested within my div, of which some are floated, and an image placeholder of absolute positioning. The floated divs are used for text values

How can i make this div NOT overlap my current 'blue' image placeholder?

CODEPEN

It currently uses the layout:

+----------------------------+
|      CREDIT CARD           |
+----------------------------+
|\/\/\/\/\/\/\/\/\/\/\/\/\/\/|
+----------------------------+
| Mr Joe Bloggs addressssssss|
| +-----------+ more address |
| |           |___|          |  <-- text appears behind image placeholder
| |               |          |
| |_______________|          |
|  footer text               |
+----------------------------+

What i would like is:

+----------------------------+
|      CREDIT CARD           |
+----------------------------+
|\/\/\/\/\/\/\/\/\/\/\/\/\/\/|
+----------------------------+
| Mr Joe Bloggs addressssssss|
| +---------------+      more|
| |               |   address|   <-- want text to wrap around it instead
| |               |          |
| |_______________|          |
|  footer text               |
+----------------------------+

How can i make this div wrap around the image's placeholder?

possible duplicate of [How to wrap text around an image using HTML/CSS](http://stackoverflow.com/questions/19179424/how-to-wrap-text-around-an-image-using-html-css) — apaul, Dec 03 '14 at 17:24
@apaul34208: i've already seen that, but since I need the top two divs to be floated, I can't do as that suggests. — jbutler483, Dec 03 '14 at 17:26

score 2 · Accepted Answer · answered Dec 03 '14 at 20:28

2

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.

answered Dec 03 '14 at 20:28

crazymatt

3,266
1
25
41

I think the issue is more like if the name wraps along two lines, the image div will be bouncing up and down for different name lengths? – jbutler483 Dec 04 '14 at 09:00
I managed to work/fiddle around with this and got *90%* of it working, so it will do until I find out a definite solution. :) – jbutler483 Dec 08 '14 at 14:44

score 0 · Answer 2 · answered Dec 03 '14 at 20:24

0

Move .card-image above .card-right

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

<div class="card-image"></div>

<div class="card-right">
    This is a very long address, with lots and lots of information available to the user. We could go on talking for years about this user! :P
</div>

Keep .card-image in the flow by floating left instead of position: absolute

.card-left {
    width:50%;
    float:left;
}
.card-right {

}
.card-image{
    /* position:absolute; */
    float: left;
    margin-right: 10px;
}

answered Dec 03 '14 at 20:24

philipb3

279
1
11

this leaves it open to 'jump' out of the card if the name gets too long (i really don't want this image to ever move) – jbutler483 Dec 04 '14 at 09:17
So then, how will you deal with a long name? If the image is positioned absolutely, the name will overlap the image? You can set a specific height for the name field whether it takes one or two lines. Or you could take the name field out of the flow so that it never affects anything that comes after. – philipb3 Dec 04 '14 at 22:39

Wrap text around a div in html

2 Answers2