CSS text wrap around an image??

[- |Flash Man| -]

Hey all,

i have an image which is sitting within a <div id="myimg"></div> and i have my main body content (just text) which is also sitting within it's own div and i want to wrap my text around the image??? how would i go about this or does anyone have any code i can use or tutorials??

Cheers :D

[BetaWar]

I am not quite sure what you mean by wrap around your image, but I would guess you mean float.. Try something like this:


<style>
#myimg{
flaot: left;
}
</script>

[- |Flash Man| -]

i want to get the same affect as this tutorial:

http://www.bigbaer.com/css_tutorials/css.image.text.wrap.tutorial.htm

but i have made the sandbags and how i use them with my #bodytext div i have no idea

Cheers

ps i tried the float and it didn't work

[Ectheo]

If you notice about halfway down the page, it states that both the float and clear properties need to be used.

Float is basically the equivalent of the html tag:



<img align="">

Clear allows any text you DON'T want next to the image to "clear" to the next line, below the image.

Using both Float and Clear you create the sandbag technique, by floating one div and clearing to the next div.

Sorry if thats not too coherent, I'm running off of 5 hours sleep.

[BetaWar]

Sorry I had a spelling error in the last post here is its proper code:

<style>
#myimg{
float: left;
}
</script>

Also, that is just multiple floats and some additional styles to make it look the way it is.

[katsesama]

Hi guys,

The bigbaer tutorial is kind of confusing :huh:, but once you get it, it's easy to do. After I figured it out, I rewrote the CSS in a big way (maybe that's what makes it easier :thumb:). That's what I use below, so though I'm doing the same thing, comparing it to bigbaer's code will be confusing.

In your CSS file (I create one just for images, since it's easier for me to keep track of things), you need to create a class or id to reference your image.

#myimg {
background:url(..images/myimg.jpg) top right no-repeat;
height: 100%
}

:ex: If you forget the height line, it won't work.

Add the sandbag class to your CSS while you're there:

.sandbag {
float:right;
clear:right;
padding-left:5px;
}

If you want to do a left-side sandbagged image, you just change the float and clear to left.

In your actual html document, you create your main div with the id above and then create a new nested div for each sandbag.

:ex: The most important thing is that you don't close the main div until the end of all your text.

//pretend there's html here and you've reached the point where you want to insert the image you're going to sandbag

<div id="myimg">
<div class="sandbag" style="width:235px; height:28px;"> </div>
<div class="sandbag" style="width:230px; height:20px;"> </div>
<div class="sandbag" style="width:225px; height:23px;"> </div>
<div class="sandbag" style="width:220px; height:10px;"> </div>

//insert the rest of your text and html here. when you reach the end of your div (it sounds like you have a div for your main text content), close out the myimg div too. Otherwise I guess you'd just close it right before the </body> tag.

</div>
</body>
</html>

A couple of other tips:

:look: Don't try to go too fine with your sandbags. My experience is the browser stops reading them correctly if you use too many sandbags. Try never to create a sandbag with a height less than 20px (you're getting too fine if you do).

:look: Be aware that the text will overlap the sandbags a bit in some cases, so it's better to give yourself some extra room at the top of the sandbag. (If you look at the bigbaer example, you can see this happening; you'll learn to compensate as you create your sandbags.)

:look: You can do a right-floated sandbagged image and a left-floated sandbagged image, but a left-floated menubar can cause snags. I'm sure there's some way to do it, but I spent a couple of hours last night trying everything I could think of and I wasn't able to manage it consistently (ie cross-browser, or even from one refresh to the next).

If you try to left-float your sandbags near a menubar, they'll start to line up horizontally like bricks. When you add the clear:left (or clear:both), the sandbag divs will immediately clear the bottom of the menubar. I guess if your menubar is short and the text will wrap far enough below the menubar that you know it won't be a problem regardless of users' screen res or browser width, that will work; I didn't have enough text in my particular situation.

:look: You'll get to the point where you can eyeball the length of your sandbags, especially if you use a tool like Dreamweaver, which will create nice outlines for your sandbags right over the image.

I'd say good luck, but that makes me sound like I'm not confident this will work.

And I am!

How about...
Cheers!
~Carolyn

[katsesama]

Annnnd....

The reason I came wandering in here is that I'm wondering how the sandbags work cross-browser? They work fine on IE 6, IE 7, Opera, and Firefox, but I'm a little worried about Netscape, Safari, and Camino?

Anyone know? If you need a page to test it on, here's one on the site I'm working on. This is a test folder; the site isn't officially live yet (mostly because it's not done yet!)

http://archetypewriting.com/hidden/GatchOnline/versions/versions_gatchaman.htm

Here's the CSS (for the sandbagging) for the person who's trying to do this for the first time:
http://archetypewriting.com/hidden/GatchOnline/versions/gatchOnline_ImgVer.css