HTML question

  jz 17:08 07 Jan 05
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 05

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

  jz 22:34 07 Jan 05

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 05

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 05

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 05

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 05

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.

Best phone camera 2016/2017: Galaxy S7 vs iPhone 7 vs Google Pixel vs HTC 10 Evo vs OnePlus 3T vs…

1995-2015: How technology has changed the world in 20 years

The Pantone Colour of the Year 2017 is Green

Super Mario Run preview | Hands-on first impressions of Super Mario Run: Mario's iPhone & iPad…