Text breaks

[titaniumbean]

How do you make text break?

I mean I have a div, body area with the main text in, in some instances on some of the pages I want it to break halfway across because I have a picture on the right hand side of the page. How do I do this? And can I do it by setting the text in the body area to behave like that whenever it comes to pictures?

Thanks in advance.

titaniumbean.

[nikkiH]

Not sure if I understand you, but is there some reason setting the align (http://www.idocs.com/tags/images/_IMG.html)property of the image isn't wrapping the text already?

[titaniumbean]

Yeah i'm using align right, but invariably some of the text goes underneath the picture. I want all the text on the one side as it will look better. I don't want to have to make the pictures bigger, anyone know how to do this?


thanks



titaniumbean.

[bazz]

you could do it like this:
<div id="divName">
<p> loads of text here. then at sone point put ion your picture like this <img src="image.jpg" title="" alt="" /> follwed by mor text here.</p>
</div>
Then in your css...
#divName {
set the parameters for your div here eg,
width: 200px; /* or a % width */
border : 1px solid #000;
background-color : #aaa;
margin : auto auto; /*centres the div*/
}

#divName p {
put your text spec here
}

#divName img {
float : right;
width : 00px; /*set your own*/
height : set your own; /*set your own*/
padding : 10px; /*set your own*/
}

This should put your image within your text, on the right hand side of its area and the text will wrap around it leaving a gap between the text of at least 10px, or whatever you set the padding to.

I haven't tested that code just now, but it's close to what I used in my site and it works there.

If you need some more help, just ask :)

BTW, it would help if you post your code. Using the align property does not fit with symantic coding. But then I don't know yet if you're trying to code symantically or not.

Bazz

[titaniumbean]

So if I were to change the value to something more like 10000px then on not any screen would it break so the text goes underneath the picture? no?


I'll try that now thanks,


titaniumbean.

[bazz]

using what I posted should not let any text go under the picture (from within that div).

Bazz

[titaniumbean]

That doesn't work, because I have other little images which I don't want floated right, which are used as bullet points.

Any more ideas ?


titaniumbean.

[bazz]

Is the page online? I think you'll find that that does work. What might not is your bullet points, becasue they are not coded into the page as part of the <li>, which is what you should be using for a list ;)

[titaniumbean]

Is the page online? I think you'll find that that does work. What might not is your bullet points, becasue they are not coded into the page as part of the <li>, which is what you should be using for a list ;)



If that wasn't so helpful i'd berate you for being so smug :thumbsup:

Cheers.

titaniumbean.

[bazz]

:D not smug, honestly. Now if you post your code, I could try to help more. Then I could do smug :D

Bazz

[mrruben5]

Give the image a class, this is what I prefer for floating images:
#somedivorwhatever { text-align:justify }
#somedivorwhatever .floatleft { foat: left }
#somedivorwhatever .floatright { foat: right }
#somedivorwhatever .clear { clear: both }

Give elements those classes, the last one is if you want text or elements just below the image, it to specify that the image only belongs to that paragraph. (In technical terms, it removes floated elements on the left and right ;) ) The first line will make nice straight lines of text.