CSS column height different on Opera/IE to FF

Question

Hi all,

Thanks to everyone who helped with my last question but I've got a new browser-independent problem:

For some reason, the image navigator (not yet functioning) on a website I'm working on is currently not displaying in the correct place on Firefox. It appears in the right place in IE8 and Opera but Firefox seems to have a problem with it.

As can be seen in the below image, the imageContainer div (the image and the left/right arrows) appears on top of the footer, this is how it should look i.e. how it looks in IE8 and Opera.

But in the image below, the imageContainer div is cutting into the footer div for some reason, and I don't know why.

imageContainer has a margin-top: 110px; to get it in the right place at the bottom of its column. There are 2 columns, the left housing the paragraphs and imageContainer and the right housing the Calendar and contact details. The footer div also has clear: both;

Also, it's not just the image that is falling into the footer, it's the arrows as well only they are the same colour as the footer so this isn't immediately apparent.

Any ideas why it isn't displaying correctly? Is there a better way of aligning the imageContainer to the bottom of it's column (to keep the box shape of the website) other than using the margin-top to position it?

Thanks in advance,

infinitifizz

P.S.

Completely forgotten I hadn't posted the site's link, here is where I got some temp space to host it: Temp Hosting

Answer 1

Not having access to the actual site makes it difficult to answer, but you could try something like position: relative; bottom: 0 to place items at the bottom.