Why won't position relative work for this?

HTML & CSS
1

Hi,

I’m having a bit of fun and games again with alignments!

For some reason, as soon as I add float: left to some divs within a popup div, it pulls them half way down the parent div (which breaks the rest of it)

With Float:

Without Float:

I’ve narrowed it down the float causing the problem (although, still not sure why!!!). I then thought I’d try position: relative, with some specified top/left positions - but that doesn’t seem to work either:

http://cssdesk.com/avSWQ

Can anyone see what I’m doing wrong?

Its probably something stupid, as I’ve been at work for over 10 hours now, so my eyes are going a wee bit squared :wink:

TIA!

Andy

2

Hi,

The position:relative in your cssdesk example is working as expected in that the purple element is moved 208px from the left. What were you expecting to happen?

Remember that position:relative doesn’t really move anything physically but moves it visually only. The element still occupies the same space on the page as though it had not been moved but just appears visually somewhere else. The element is moved in relation to itself so values of top:0 etc mean nothing as that means ‘move me by no pixels’.:slight_smile:

I’d need to see your page to work out what the problem with the float is but generally the answer is one of containment or clearing or width available.

3

Hi,

Thanks for the reply :slight_smile: Ah ok, well that would explain things a but then! I always thought that it would let you align top/left, based on its relation to the parent element. Normally I would just use “float” to achieve what I want (and the weird thing, is that it works fine on other sites), which is why I was trying out the “relative” positioning.

I’d need to see your page to work out what the problem with the float is but generally the answer is one of containment or clearing or width available.

Thanks. The site is a dev one, and under IP block - but if you don’t mind PM’ing/emailing me your IP address, I’m more than happy to add you and show you the issue happening :slight_smile:

Thanks for your time! :cool:

Andy

4

but if you don’t mind PM’ing/emailing me your IP address,

Ok I’ll send that over on Sunday when I get a few spare minutes :slight_smile:

5

Thanks for the help Paul :slight_smile:

For anyone interested, the issue was coming out of the fact that the .previewBox needed to have a clear:both in it, to stop other elements “poking through”.

Cheers

Andy