Text wrapping Options

[JimiB]

Ok in the good old bad days text wrapping was as simple as
<img src="redribbon.gif"
align="left">
Then a whole load of text like this would begin at the top right of the image and as it reaches the image bottom would wrap around it.

Todays block system creates its own problems which breaks up a page if i try to alter the text to wrap around the image


[The html for this block which i am attempting to alter without breaking up the page.
<div class="green_box">
<div class="clock"><img alt="Tattoo Removal Ireland" src="images/clock.jpg" title="Athlone Tattoo Removal Clinic" /></div>

<div class="text_content">
<h1>Tattoo Removal</h1>

<p class="green"><br />
Tattoo removal is mostly performed today using state of the art lasers. These are capable of shattering the hardened ink pigmentations into minute particles, small enough so that your body's own immune system is capable of extracting them alongside your dead skin cells.Tattoo removal is an ever increasing "want", which can be attributed to a rise in the number of artists/parlors within our Towns and Cities. The public's growing interest in Art and culture reflects the tribal background of the origination of this body art, and they want a piece of it. Thankfully today, tattoo removal is available without the ancient task of removing any skin or limbs!</p>

<p class="green"></p>
</div>

<div id="right_nav">

[pandy]

Floated images (or other things) behave much the same as they used to. The main difference is that we nowadays use CSS float:left .

I'm guessing you don't like what you see in the screen cap and that the reason is the straight left margin of the text. Right? You must have given the text block a left margin to accomplish that. Don't do that and the text will wrap around the floated image. To create a little space between the image and the text and still have the text wrap, give the image a little right margin instead. And a little bottom margin too, if you like.

[JimiB]

The css for image and text is
p.green{color:#d4f0ba;}
.clock{float:left;padding:0;width:120px;height:116px;margin:2px 2px;}

The text has no margins set at all

[pandy]

The HTML and CSS you have posted can't create what's shown in the screen cap. Can you post all of the HTML and CSS, please? Or even better, link to the page if possible.

[JimiB]

The HTML and CSS you have posted can't create what's shown in the screen cap. Can you post all of the HTML and CSS, please? Or even better, link to the page if possible.

http://www.jimbreslin.ie

[pandy]

Ah, I'm sorry. I didn't notice the .text_content was floated too. I blame the late hour. That's why the text doesn't wrap.

It's easy to fix though.
1. Remove the float on text-content.
2.Remove div.clock from the HTML and create a wrapper DIV around the image and .text_content instead. Like this.

CODE

<div id="clockwrapper"><img alt="Tattoo Removal Ireland" src="images/clock.jpg" title="Athlone Tattoo Removal Clinic" />

   <div class="text_content">
      <h1>Tattoo Removal</h1>

      <p class="green">Tattoo removal is mostly performed today using state of the art lasers. These are capable of shattering the hardened ink pigmentations into minute particles, small enough so that your body's own immune system is capable of extracting them alongside your dead skin cells.Tattoo removal is an ever increasing "want", which can be attributed to a rise in the number of artists/parlors within our Towns and Cities. The public's growing interest in Art and culture reflects the tribal background of the origination of this body art, and they want a piece of it. Thankfully today, tattoo removal is available without the ancient task of removing any skin or limbs!</p>
   </div>
   <p class="green"></p>
</div>

Now float the wrapper DIV you just created and the image. Like so.

CODE

#clockwrapper     { float: left }
#clockwrapper img { float: left;
                    padding: 0 1em 0 0 }

I added a little right padding to the image so it won't be snug against the text. Point is, the text itself no longer is floated so it will wrap. Instead the text and the image is floated as a unit and the image is floated inside their common box.

Sidenote, since you said you are new to CSS, you never needed div.clock. As you see the image can be floated fine by itself. Basically you only need DIVs when you want to group something together. Otherwise you can apply CSS to the elements you already have.

[JimiB]

It's easy to fix though.
1. Remove the float on text-content.
2.Remove div.clock from the HTML and create a wrapper DIV around the image and .text_content instead. Like this.

Removing the float: left; from the text-content breaks up the contents of the green box

[pandy]

You must do the other things too.

[JimiB]

i changed everything in your post.
only the float left unchanged

This post has been edited by JimiB: May 10 2017, 07:14 PM

[pandy]

Here is the CSS I added.

CODE

.text_content     { float: none }
#clockwrapper     { float: left }
#clockwrapper img { float: left;
                    padding: 0 1em 0 0}

This is the concerned part of the HTML.

CODE

<div id="clockwrapper"><img alt="Tattoo Removal Ireland" src="images/clock.jpg" title="Athlone Tattoo Removal Clinic" />

<div class="text_content">
<h1>Tattoo Removal</h1>

<p class="green">Tattoo removal is mostly performed today using state of the art lasers. These are capable of shattering the hardened ink pigmentations into minute particles, small enough so that your body's own immune system is capable of extracting them alongside your dead skin cells.Tattoo removal is an ever increasing "want", which can be attributed to a rise in the number of artists/parlors within our Towns and Cities. The public's growing interest in Art and culture reflects the tribal background of the origination of this body art, and they want a piece of it. Thankfully today, tattoo removal is available without the ancient task of removing any skin or limbs!</p>
</div>
<p class="green"></p>
</div>

And this is how it looks.



You may want to make the text block wider.

[JimiB]

Ah, i was missing a small piece, but found and added now and we are looking good again. Have widened the text block a bit as recommended.

Thank you Pandy for your assistance it is always appreciated!

We never had these problems with Webmonkey!

[pandy]

Good. Well, I think things would behave the same with align="left" for the image and the DIV.