Site Reference Forums

take out the align=right, add a style to the img with the attributes display:block; float:right; instead.  You may also need something like <br style="clear:right"> just before the closing </div> to make sure the box properly surrounds the image at the bottom.

Hey Stitch!

I've never done a br=clear thingy. Never seen it before. But my images work fine.

Make sure you've got the </div>

align=right isn't correct. That maybe your problem. Use float:right as Steven suggested.

Here's what I use:

img {

        padding: 0px;

        display: inline;

        border: solid black 1px;}

p.right_350 {

        float: right;

        text-align: center;

        width: 350px;

        margin: 0 0 2px 7px;

        color: #666666;

        }

<p class="right_350">

<img src='http://www.sapphirecoastnews.com/wp-content/uploads/2008/02/julia_gillard.jpg' alt='Julia Gillard' />

Julia Gillard

</p>

This gives me an image with a black border. The text (caption) is centred below the image, outside the border. The text content flows around the image.

I don't understand what display: inline; means. But it works. I think it makes the top of the image line up with the top of the text. Not real sure about that, though. I think it will still work the same without it. So dunno!

I've been using <p> lately instead of <div> because that's what WP likes.

If you don't want the black border, or if you can be happy with the border surrounding the caption text as well as the image, you can control it all with the <img> tag.

Regards,
Laurie.

Last edited by laurie_m (2008-02-21 19:25:42)

laurie_m wrote:

I don't understand what display: inline; means. But it works. I think it makes the top of the image line up with the top of the text. Not real sure about that, though. I think it will still work the same without it. So dunno!

The display:inline; attribute is meant to make a block type element (<p>, <h1>...<h6>, <div>, any element that will normally take up a full area horizontally) act like an inline element (<span>, <b>, <img>, any element that can be used to change part of a line or add something inside a line).  an image is already considered an inline element, so display:inline; is actually redundant.  Normally when you float an object, it should be a block type, hence the reason I use display:block;.  It's also a good idea to set the height and width in css of an image you're floating.

Last edited by Steven_A_S (2008-02-22 09:22:07)

Once a block element is floated (say to the right), any following elements, block and inline, will try and fill the empty space (in this case to the left of the floated object).  Using text-align would have the unfortunate effect of causing text inside to be aligned right, and may not work as desired on images in all browsers as the specification is only meant to affect text (yes it probably works in IE, but that's because IE isn't compliant)

I'm not sure what you're asking, what you have seems to work fine on your page.  Changing the image to a block element would prevent the text in the paragraph from coming up beside the image if the width of the paragraph were wider than the image and the text would be centered, but the image wouldn't be centered (except in IE)

The way I would have done it (though not necessarily better) is this:

.right_350

{

    float:right;

    width:352px;    /* 2 px wider to account for the 1 px border on each side of the image */

    margin:0 0 2px 7px;

}

img

{

    padding: 0px;

    border: solid black 1px;

}

/* I used h4 instead of paragraph just for semantics and because it differentiates it from other

paragraphs you're probably using.  you can use paragraph, but you'd need to set a class */

h4

{

    text-align: center;

    margin:0;

    padding:0;

    color: #666666;

}

<div class="right_350">

    <img src='http://www.sapphirecoastnews.com/wp-content/uploads/2008/02/julia_gillard.jpg'

              alt='Julia Gillard' />

    <h4>

        Julia Gillard

    </h4>

</div>

This just takes the image out of the paragraph so I can control them separately and puts them both in a div which controls how they interact with the rest of the page.  Because the image is contained in a block element (div in my example and paragraph in yours) there's no need to change the display type on the image.

I wouldn't tie it to just a break tag as that could mess things up when you don't really need to clear a float.  I normally assign a class to the break and set the clear:both; on that class

the <br style="clear: right" /> is one way to go. (Take care of the "/" wich closes the tag) this is a must if you want to write w3c compliant xhtml - it closes the tag.

the other version is <br clear="right" /> <- slightly different - it doesn´t make use of css

the 3rd version for xhtml - strict
for the strict version <br /> is outdated, in this case you´ll need some extra markup:

<div style="clear: right"></div>

that´s it !?!

actually Street, I tested my page (which has <br /> tags) on xhtml 1.0 strict and xhtml 1.1 (which is strict only) and both accepted the tags.  Doesn't look like W3C is depricating the <br /> tag yet.

Any height you set doesn't include the padding, margin, and border width.  The padding is inside the border, but outside  what is considered the object or div.  When you evaluate how much space an object is going to take for purposes of placement you need to add the padding, border width, and margin to it.  Hopefully this example will help

-------------------------------------------------------------------

|                             Margin                              |

|     ------------------------Border-------------------------     |

|     |                      Padding                        |     |

|     |    ---------------------------------------------    |     |

|     |    |                    /\                     |    |     |

|     |    |                     |                     |    |     |

|     |    |                  height                   |    |     |

|     |    |<----width-----------+-------------------->|    |     |

|     |    |                    \/                     |    |     |

|     |    ---------------------------------------------    |     |

|     -------------------------------------------------------     |

-------------------------------------------------------------------

Assuming the object above is your div, the area you could normally put something within the div would be limited to inside the inner box (assuming you didn't use negative margins, specifically position the object outside the div, or the inner object didn't overflow the div).

Last edited by Steven_A_S (2008-02-29 20:36:43)