Continuing my education of <div>'s and the like, I have a small problem I would love to clean up with my long-standing Contents Page.

Towards the top-right corner of the page there is what appears to be a small graphic containing 'good wishes' from my author. I want to keep this design and layout, but have had to include the graphic in the backgound image in order for it to stay where it is. This is fine, but as the Contents grow I have to keep increasing the background image's height to avoid the 'good wishes' appearing again.

I would love to separate the small graphic from the background and, somehow, fix it into it's position with (maybe) a form of positioning <div>, but without distorting the other objects layout due to wrapping. I could then change the background to a fixed reduced height image and save a modicom of download time.

Any ideas?

I've got the following to work in IE:
Unfortunately Firefox, etc... seem to ignore the negative left margin. Any thoughts?

Instead of a DIV, why not float an inline image directly? The "clear" should then be applied to the first element you don't want flowing around the IMG, like "table.main".


IIRC a negative margin is supposed to do the opposite of what a positive one would've done. This apparently means that since a positive left margin would do nothing on a right-floated element (it would just push other content away from the floated element, but not affect the element itself), a negative left margin will do nothing either. So if you want it pushed away from the right window edge, use a right margin instead.

More about negative margins: http://www.communitymx.com/content/article...1&cid=B0029

Thanks for the link Christian J, very useful, but it does seem to confirm that a negative margin will move an element in the opposite direction of a positive margin. Unfortunately, whichever method I use for the graphic, inline or <div> I have success with IE7, but cannot get the image in Firefox to move away from the extreme right-hand margin of the screen without affecting the content of the following table.
My in-line image coding was as follows:
I have retained the negative left margin, as this seems to be the only way in IE7 that I can get the image away from the right edge and have no effect on the table contents (a right margin value affects the table contents). I cannot find a similar way to do the same with Firefox.

Simplified example now here.

And, no matter what I try I cannot place the box in IE7 or Firefox without affecting the table layout next to it, without a negative left margin. The main difference between the two is that in IE7 the box moves to the left to wherever I want it to, whereas with Firefox it is the table that moves, depending on the value of the negative left margin. ???

Oh, and another thing, if I move the clear: right to the next element that moves the whole table down to below the box in Firefox.

I don't understand. In the sample page there is no class 'wishes' and the greating is merged with the background.
http://www.denniswheatley.info/graphics/contentbck.jpg

Sorry pandy: seems like I'd been amending my previous posting while you were replying. The new simplified example should be a lot clearer

Oh, sorry. I didn't see the new URL. But now there is no image at all. What is it you try to place where exactly?

To make it simple (for lazy people!:-)) I've removed the original image and surplus css/html and replaced the image with a <p> with a red border and a white background. This is now my movable object which I want to be able to place wherever I want, without affecting any other elements' layout, and to have the display correct in all browsers.

P comes with default browser styling like margins and it's a block level element while IMG is not. Where do you want it? In the top right corner somewhere? I'd cut the handwriting out from the background to start with. You could use it as background for some other element than body, for example the DIV with the class 'center', and position it (the small background image) in the top right corner. Or you could use it as an inline image and position it absolute with an offset from the top right corner.


or


The second on needs an IMG tag with the class 'greating'. Where you put it doesn't matter.

Yes but see what I wrote above that link. Can't check what IE7's doing, I'm afraid.



There's no CLEAR attribute for TABLE (only for BR), I was thinking of CSS:




Then I don't understand what kind of layout you want.

It was that simple - thanks, again, pandy.
(P.S. It also works with a <p> element, useful for such tricks as shadow text?)

Reminds me of when I learnt about car mechanics many, many years ago and had just completed my bit on the electrical system. A couple of days later my car suddenly lost all power. Great - time to put my new knowledge to the test! Spent the next hour going through everything I had learnt, but to no avail. Fortunately a friend was passing. "Problems?" he asked. I told him the sorry tale. He immediately looked under the bonnet (US-hood) and re-tightened one of the battery connections!

Christian J, thanks for all that. As you can see from the above, I was trying to approach the problem from entirely the wrong angle.

Out of interest, should it matter where a 'clear' is? Isn't table.main { clear: right; } the same as <table clear="right">? Ahhh! I now see it on re-reading your post. I assume you mean there's no html CLEAR attribute for table, which is why you have to use css!

Thanks again for your input and apologise for my lack of understanding.

Position absolute can be a little scary, because it _really_ does what you tell it to... Positioning stuff relative the browser window like this is generally not a good idea, but I think a small stamp in a corner like this is safe. Play with it, read about it and be careful with it. Above all, don't think an AP box must, or even should, be positioned relative the browser window. I think AP is most useful for positioning stuff within sections. The offset is calculated relative the AP element's containing block™. And the containing block is...

pandy, thanks for this.

I was tempted to reply "...even if the containing block is <body>, which is, by definition, static?", but continued to read the article and got confused.
So how does <div1> know where to position itself if it is no longer contained by <body> and what is it contained by?? And, more importantly, does it matter?