Problem with position-relative in IE

[xoggoth]

Trying to do the missus's website and she like the casual billboard approach with images and text slapped on in overlapping positions as here:

Bookmates Ltd - classroom display

The obvious way seemed to be to use position relative and move some things up a bit. Fine in FF etc but in IE the height of the page still reflects the original position and you get a big gap at the bottom.

Not a big deal but are there any alternative approaches that would work better? Cheers.

[Bunk]

Trying to do the missus's website and she like the casual billboard approach with images and text slapped on in overlapping positions as here:

Bookmates Ltd - classroom display

The obvious way seemed to be to use position relative and move some things up a bit. Fine in FF etc but in IE the height of the page still reflects the original position and you get a big gap at the bottom.

Not a big deal but are there any alternative approaches that would work better? Cheers.

Try using position:absolute instead. It removes the elements from the flow of the page so you shouldn't get the space at the bottom.

[xoggoth]

Cheers bunk. Trouble is (should have mentioned) that it is all kept in a central box whatever the monitor resolution using a containing div with margin auto. Setting absolute overrides that.

[Bunk]

Cheers bunk. Trouble is (should have mentioned) that it is all kept in a central box whatever the monitor resolution using a containing div with margin auto. Setting absolute overrides that.

Ah, ok. Try adding position:relative to the containing div. That should make the absolutely positioned elements behave as if they are positioned relative to the containing div.

Hope that makes sense.