Caption not going where I want it

I use “margin” to adjust the space images of various sizes take up to compensate for unsighlty text positioning where I have a variety of sizes, but this causes the caption to end up far away from the image.
In the example below, the caption ends up half a page below the image instead of “glued to it”.

Is there a quick and easy solution that does not require to change the way I’m doing things now?

<div class=“logo”><img src=“http://www.boiler-breakdown-repair-london.co.uk/pics/GSR GIF 200.gif” alt=“gas safe logo” width=“200” height=“200”
style="float: left; margin: .1em 1em 71em 1em; "><br> CAPTION </div>

If I run the code you posted, the caption end up right beside the image, so there’ something else in your code causing that reaction. We’d need to see the whole picture.

Sorry for delay, notification didn’t seem to work.

This is the live page where it happens.

caption problem page

edit

Even stranger: Chrome and Firefox display the caption well below the image, I.E. and Opera display it on the right of the image.

The image has a gigantic bottom margin, which is pushing the caption way down the page:

element.style {
float: left;
margin: .1em 1em [COLOR="#FF0000"]61em[/COLOR] 1em;
}

Yes, I use that to as an easy way to influence positioning. I was hoping there would be an easy way to get the positioning of the caption to “ignore” that, so I can keep using margin or padding for the time being. My site is forever being updated/extended and improved.

You could just put the bottom margin on the .logo div instead:

.logo {
float: right;
margin: 1em 0em [COLOR="#FF0000"]61em[/COLOR] 4em;
}

[FONT=Verdana]It seems an odd way to do things to me, but if that’s how you want to carry on, can’t you just add that large bottom margin to the div, instead of the image?

Edit:

Ninja’d by Ralph. :slight_smile: Great minds, and all that. :lol:

Alas, if it were only that easy. As it the margin is different for every image, I can’t do it that way.
It’s a stop gap measure during the revamp operation integrating css in my site. There are possibly occasions where an unlucky combination of text quantity, section size and image size, where I will keep using this to make it easier to read.
So far, the way I have styled it displays pretty consistently over a range of browsers, screensizes and resolutions. As I am far from a star at HTML/CSS, I am hesitant to impement any major changes in “style”.

As I am far from a star at HTML/CSS, I am hesitant to impement any major changes in “style”.

Unfortunately, a “major change” is exactly what this page needs.

What do you have to lose if you start another version? - a good place to start would be to produce a drawing of what you want it to look like.

I can practically promise that you would have a lot to gain by stepping back and starting over.

Give it some thought.

That right column with the logo in it is something of a mystery object. How tall is it supposed to be?.. not in ems or pixels, but in terms of content. Is it supposed to go all the way to the bottom of the page, end just before the xtra-small text, maybe end above the “Read the Boiler Repair Blog” line, or end somewhere higher? I assume it’s supposed to adjust to the widths of different images. The caption isn’t a problem. It will reside just beneath the image.

Like I said above, I use margin and padding for temporary “positioning”. But part of it will be permanent, and even a 3 em marging/padding will bring the caption too far from the image I want the caption glued to the image.

Yes, you repeated yourself. But you didn’t describe anything new about the right column and the “positioning”. Would it be desirable for the height of that right column to self-adjust, also? Just need to identify where.

Is this close enough to “glued”?

In a nutshell, I’m going from very plain html to css. On top of that, I’m adding lots of images of various sizes. Added to that, will be more text changing the amount of sections from an average of 2, to 5 or 6. To avoid having very wide areas of tex, I’m using the padding on the right hand image(s) to extend the “volume” to just above the bottom section starting with the blog announcement.

Self adjusting sounds good. Very good.
What would determine what/where it would self adjust to?
For the coming couple of months, it will be either just the logo or the logo plus one image that make up the right hand side. As the blog announcement is very big on purpose, the right hand side images/padding need to stop just above “the blog” to stop that part from being squashed off a single line.

As for the “restart” that isn’t an option as the site is adjusted based predominantly on feedback, so there is not concept as such, nor can I make one.

That is great. My captions would typically be 5-10 words in farily small text so it fits on 2 lines.

My concept of “restart” does NOT mean redesign the look of the site. Quite the contrary, I would only recommend a different html framework/structure for the page… something that makes it easier to manage. The look of the site and it’s future based on user feedback would not change, as far as I can imagine.

The idea of a self-adjusting right column length depends on knowing where it should stop and closing the container in which the right column resides. All content below that point, such as the blog announcement or a footer, will be full page width or part of another container. The content above that point will be bordered on the right by the column.

So, if I understand correctly, the purpose of the right column is to contain the logo and maybe some other images and to reduce the width of the content text.

What do you mean by “sections”? Are you talking about columns… growing toward a multi-column layout? Or are you describing “rows” or horizontal groups of text (similar to the present style)? And where do you expect to add more images (presumably with captions)? Would you place some of them within the text?

My thoughts are based on the current snapshot of your site. Your future plans my prove that my ideas are very “short-sighted” and impractical. The discussion is important so I don’t lead you down a short path.

My brain has gone in shut down mode for the day, or the night rather, as it is gone 1 am here.
I’ll see how I can do a concise concept discription without making it in a 200 page desertation after a bit of shut eye.
Your help is most appreciated.

That sounds good, very good actually,albeit in a rather abstract way; I’ve got no idea how that would bedone.

My site does not use columns. Thebackbone is the text, which is “split” in 4-6 sections by h-tags.The images are used to tart the site up and “define/position” thetext blocks at the same time. The “column” is a stop gap measureto limit the text width for sections where not all images have beenaded.

Yes, albeit that there is no real column as per above.

Section are the 4-6 blocks of text “separated” by h-tags. Between 100 and 400 words, but mostly between 150 and 250 words.

The essence of my “future plan” isto adapt/adjust/extend/improve based on the feedback of readers.Whenever a reader tells me “I like your site, but… or, apartfrom…” I question them and make a note.
I have done this from the word go, andfound it much more efficacious than using market research.

The only red thread that I can think ofthat will continue to exist, is that I want my site specifically tolook different from most other sites in my industry. Partiallybecause it matches my company usp, partially to stand out and grabpeople’s attention.
So no popular/traditional 2 or 3 columndesign with navbars top or left and “alternative info” in theremaining space. No templates, no flash and no glossed up showroomimages of things that virtually nobody has seen in real life. Ifyou’re selling Fords, don’t show images of people in $5000 suits thatlook like they own 3 Rollers.

Another issue is the ongoing butirregular addition and alteration of content. Wherever practicable, Itake photos of work I do and after selecting and processing theimages, I add them to existing pages as well as new ones. The samegoes for information i.e. text. Depending on what I learn/discover, Iadd or alter existing text; sometimes one line, sometimes a paragraph.
This has lead to page lengths varyingfrom 500 to 2000 words, and 1-8 images on a page, with no guaranteesthat those limits won’t be exceeded in the future.

Hopefully, this answers most of yourquestions.

benbob, a couple of questions.

(1) It sounds like the images planned for the right “column” are intended to align with certain sections of text. ie: top of image aligns with top of text in that section.

Should the text in sections without an image stretch the full width of the page or should it honor an empty space and preserve the appearance of a continuous column for images? (except for those bottom full width sections)

(2) Right now, your page stretches to conform to very wide browser widths. Have you considered limiting the maximum width of your page to around 1040px or so? (I just picked a number.)

If so, change your #wrapper entirely to:


#wrapper {
    max-width:1040px;
    margin:0px auto;
}

Another suggestion… change your !DOCTYPE from HTML4 strict to HTML4 transitional.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The reason is because you are using target=“_blank” in your anchors. That attribute is not valid in HTML4 strict.