Overlaying an Image Problem Across Multiple DIVS

[Fruit & Veg]

http://www.thebrandsurgery.co.uk/testsite/ - this page is setup and I need to position that logo at the bottom across the top pink bar so it lines up.

I've tried multiple options but I can't get it to do all these 3 things;

1. Line up in IE and FF.
2. Remain in the same place for different screen sizes.
3. Not affect the rest of the content on the page.

Using relative positioning in the various divs gives me problem No.3. Absolute positioning gives me problem No.2. Problem No.1 is something I always suffer from

Any ideas?

[DaveWoods]

I can't see a pink bar at the bottom so not sure what you're after but here's a couple of suggestions.

Validate your code at http://w3.validator.org there's a few problems in that you're using multiple ID's. Presumably you're using it for styling so where you have multiple instances you should always use a class.

In your CSS use the following as the first line in your code

* {
  padding: 0; margin: 0;
}

All browsers have different default's set for different elements so what this does is set every element on the page to zero instead of relying on the browser default.

You'll then need to go through your code and apply it where you need it but you'll get much more consistent results and will probably help solve your problem with things lining up correctly in Firefox and IE.

I'd initially look at using floats and the padding/margin on an element along with a background image to get a foreground image to lineup with a background image but it isn't clear from your page what you're after which is probably why you've not had any responses.

Hope that helps though.