Positioning an image

HTML & CSS
1

Hi,

I want some help, please.

In this page - the egg image is going a bit upwards while it comes absolutely correct [url=http://bit.ly/pCM9kJ]in this one

This is because some fields like “sex”, “subject”, “department” etc. in the previous link are missing.

Those fields are optional so they will appear in some pages and not appear in some pages. What should I do so that the egg position is like in the second link in all cases?

Any help is appreciated.

2

The eggimage div is positioned by means of a negative top margin, and as its original position depends upon the preceding content, which is variable, it’s not a reliable method.

An alternative would be to absolutely position the div within it’s parent div.

The parent has three classes applied: jr_pgContainer jr_itemDetail hReview-aggregate, so firstly apply position:relative to one of these so that child elements may be absolutely positioned in relation to its boundaries. For example:

.jr_itemDetail {
	position:relative;
	}

Then remove the float, margin-top and margin-right from .eggimage, and apply position:absolute; top:82px; and right:50px;

.eggImage {
	position: absolute;
	top: 82px;
	right: 50px;
	padding: 0 1em;
}
3

Thanks Victorinox!! It worked like a charm!! :slight_smile:

4

How do I delete this thread? I don’t want this thread in Google search results when somebody searches for my website. And that is exactly what is happening.

I used bit.ly links so that links will not appear, but this forum puts the title of the website and not links.

Moderator, can you please remove this thread? Or change the site name so that this thread doesn’t appear in Google search results for my site?