CSS positioning issue. Creates a space between two divs.

My webpage can be found at http://www.sarahjanetrading.com/js/j/index.html. All the images and XHTML+CSS is there and can be acces开发者_如何学编程sed by anyone.

There is this blank space because of the uFlip image between the featured and the main content.

I have been trying to fix this issue for a while now with no success.

Thanks

Quick fix: add margin-top: -78px; to #main.

To expand a bit... When you have elements that you wish to appear as if they span or "escape" containers, you have a few options. Among those are:

• Negative margins, either on the element itself, or on adjacent elements
• Absolute/Relative positioning using either negative values or positioning relative to a parent container
• Creating the appearance of containers that aren't really there by using background images or other css tricks

Try giving a negative bottom margin to the uFlip image.

If you don't want to use position absolute why not crop the bottom of the image and then use a CSS background image on the next element that completes the uFlip image?

I tried the following and it worked in removing the white space:

#featured-image {
    margin-left: 98px;
    margin-top: -41px;
}

It works on FF7 but I'm not sure about other browsers.