HTML question

  jz 17:08 07 Jan 2005
Locked

I have an image and I want text to be on the right of it, so I use the "left" attribute in the image tag. I only want part of the text to be here, then I want the rest of the text to be underneath. I can't seem to find a tag that makes the next bit of text go below the image. I know that I could do this with a 2-celled table, but before I resort to this, is there a tag that does what I need?

  Eric10 17:50 07 Jan 2005

Try <p clear="left">Your bottom text here</p>

  jz 22:34 07 Jan 2005

Thanks, that works, but leaves quite a big gap under the picture. I tried <br clear="left"> which does the same but with a much smaller gap. I'm not sure if it's valid HTML though - will all browers react in a similar way?

  Eric10 12:12 08 Jan 2005

I've just been doing a little investigation and it appears that CLEAR is an attribute of <BR> rather than of <P>. I tried it in Firefox 1.0 and my <p clear="left"> failed while your <br clear="left"> worked just fine. click here for more information and how to use it with styles.

  Talented Monkey 16:06 08 Jan 2005

Use the align attribute for the <img> tag Ie. <img align="left" src="yourpic"> these attributes will wrap text around the image in certain ways within the container you are placing the image and text in. anyway have a play with the following way as above example.


left or right :Aligns to the side and wraps the text above, around, and below it.

top :Aligns with the tallest item available.

texttop: Aligns with the tallest text character available

middle: Aligns the baseline of the current line with the middle of the image.

absmiddle: Aligns the middle of the current line with the middle of the image.

baseline : Aligns the bottom of the image with the baseline of the current line.

bottom :Aligns the bottom of the image with the baseline of the current line.

absbottom :Aligns the bottom of the image with the bottom of the current line

  Talented Monkey 16:17 08 Jan 2005

bah failed to spot you already tried align="left"

Ok text wrapping is not an exact science at will wrap differntly around the image depending on browser type and screen resolution etc.

There is no HMTL tag that will tell the browser to put image to left text to right with another bit at bottom in one go.


If having a block of text to the right of image with a specific line below it is critical to your layout then you are going to have to create a table or nested divs (maybe best for you to stcik to a small table, messy and not my style, but it works)

I wouldnt get too hung up about the gap between bottom of image and text, unless its more than 2 lines, mainly becuase each browser, personal setting and so on will create a small variation of what your idea of perfect layout is.

  jz 19:38 10 Jan 2005

I've done a bit of testing... <br clear="left"> works with Netscape 4.6, IE6.0 and Firefox 1.0 and only leaves a small gap for all browsers, which is just what I want.

This thread is now locked and can not be replied to.

Elsewhere on IDG sites

Alienware 17 R4 2017 review

These brilliant Lego posters show just what children's imaginations are capable of

Mac power user tips and hidden tricks

Comment réinitialiser votre PC, ordinateur portable ou tablette Windows ?