text wrap with images. 1

[DaRNCaT]

I need to have a block of text and images with the text wrapping around the images.
layout is-
image to left, text wrapping around it.
text, image to right
image to left, text

I have tried and tried but I just get a jumbled mess, I'm sure I'm looking at this the wrong way- is there some way to create a holding box, and just align left and right with the images?

the text isn't quite volumous enough to fill the page, so there will be white space, basically they are captions next to the images.

any pointers- I've google searched but I think I'm still looking in the wrong direction, it must be easier than the complicated mess I've come up with!

----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..

 

[chessbot]

Yes there is: the [tt]float[/tt] property.

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)

 

[DaRNCaT]

can you please explain, I'm not good with CSS, and I've tried using float, it overlaps the text on the image above and I cannot get it to sit right.


----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..

 

[chessbot]

Do you have an example?

--Chessbot

"In that blessed region of Four Dimensions, shall we linger on the threshold of the Fifth, and not enter therein? Ah, no! [...] Then, yielding to our intellectual onset, the gates of the Sixth Dimension shall fly open; after that a Seventh, and then an Eighth -- --" Flatland, A. Square (E. A. Abbott)

 

[dkdude]

Maybe this is what you need ....

<div>
  <img src="aPicture.jpg" border="0" align="left" style="margin-right:10px;margin-bottom:10px;" />
  Some text text text text text text text text text text ....
</div>
<hr />
<div>
  <img src="anotherPictire.jpg" border="0" align="right" style="margin-left:10px;margin-bottom:10px;" />
  Some text text text text text text text text text text ....
</div>

Regards


Jakob

 

[DaRNCaT]

figured it out thanks!
Removed all css markup and just used <br> to space the text enough to allow align left and align right on the images to sit right.

I feel so dumb now, I spent hours fooling with spans and floats etc.....

----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..

 

[taylorantone]

float is still your best bet though

 

[Vragabond]

Like taylorantone says, you're better off using float property to outdated html attributes. Just imagine this:
<img style="float: left;" />text text text text text text

now, if your text is not long enough and everything jumbles, just end it with:

<br style="clear: both;" />

That will stop floating and put you in line right after the floated element. That way all is done much simpler and nicer, and is also valid in latest xhtml versions.

 

[DaRNCaT]

thanks Vagrabond, thats the first time I've understood the explinations of how to do it. that certainly seems easier!

----------------------------------------
Sometimes, when my code just won't behave, I take it outside and make it listen to britney spears music, and when it comes back it's really well behaved. I wonder if it's suffering from post tramatic stress syndrome now..

 

[dkdude]

Yup! You're absolutely right - xhtml is the latest and the way to go.

My "two cents" came from this : as long as the DOCTYPE is in place (in my suggested solution HTML4.01) the align property is still valid - both to new and "ancient" browsers

Best Regards


Jakob