Images

  Dorkins 09:07 11 Jan 07
Locked

I know how to use the br clear="left">, br clear="right"> and br clear="all"> tags but there is a way of getting the text directly below an image without a gap or space between the image and the text. Only i can't for the life of me remember it. Could someone help me out here please. Thanks

  Eric10 11:04 11 Jan 07

Can you put it inside a div and use <br> like this or is it more complicated?

<p>Paragraph text here.
<div style="text-align: center; float: left; padding: 10px"><img src="your_image.jpg"> <br>Following text under picture.
</div>
</p>

If your picture isn't floated inside a paragraph then just use <br> on its own.

  LeadingMNMs 18:28 11 Jan 07

From my quick test it seems to be a problem with IE. In Firefox my text was directly under the picture, while in IE there was clearly a gap.

I tried setting margins and padding to 0, but that did nothing, so I set them as negative which did indeed close the space. The problem is that this messes up the layout in other browsers, causing an overlap as expected.

  Eric10 20:27 11 Jan 07

I may have misunderstood just what you were asking.
If you use the following:
<img src="your_image.jpg"><br clear="left">
<p>Paragraph text under picture</p>
Then you get a space between the picture and the text due to starting a new paragraph.

If you use:
<img src="your_image.jpg"><br clear="left"><div>Text in a div under the picture</div>
Then you don't get a space.

Also if you put both the picture and the text in the same paragraph but separated by the line break like:
<p><img src="your_image.jpg"><br clear="left">Both picture and text inside a paragraph</p>
Then you don't get a space either.

Tested in IE6, IE7, Firefox 1.5, and Opera 9.10 and they all display the same.

  Dorkins 21:37 11 Jan 07

My problem is i have got text-image-text all on one line which looks great but the line of text which comes immediately after there is a gap/space which spoils the effect.

  Eric10 22:29 11 Jan 07

It would help greatly if you could show us the section of code that is giving you the problem otherwise we are just shooting in the dark. Or if the site is online a link to it would be even better.
In the meantime you could try this for the paragraph you are wanting to move up:
<p style="margin-top: -35px">Text here.</p>

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

Huawei P10 review

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

An overview: What leading creative agencies are doing to improve diversity

New iPad, iPhone SE & Red iPhone 7 on sale now