div boxes piling up...

[fdgsogc]

Hi,
I am a novice CSS programmer. Need help with DIV containers.

PROBLEM: I have three separate DIV containers one under the other in my code. I am rearranging the containers with the attributes of CSS "position:relative; top:X; left:Y" being used to relocate their position (X and Y being differnt positions for each of the boxes). However, my first container (yellow one) is as large as if the containers are still piled up on on top of the other. I DO NOT want the space under my green and purple containers to be there.

Please see

http://www.digiuseppe.ca/ztest.htm

as an example

 

[BabyJeffy]

I don't see that happening at all (in Safari for the Mac).

Maybe you need to make your browser window wider?

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[fdgsogc]

Jeff,

Are you saying that the bottom of the yellow box is
immediately under the bottom of the purple box?

There is no additional space between the bottom of the purple box and the bottom of the yellow box?

 

[BabyJeffy]

Here is a quick screen-grab of what it looks like on Safari for me:

Cheers,
Jeff

[tt]Jeff's Page @ Code Couch

http://www.codecouch.com/jeff/

http://www.codecouch.com/jeff/blog/

[/tt]

What is Javascript? FAQ216-6094

 

[Vragabond]

Same thing in my Mozilla on PC.

 

[fdgsogc]

That's weird. It doesn't look like that in IE or Firefox. I found out that when you use position:relative, even though you use top and left to move the box around, the original space that the container took up remains there and is blank. New text would go below where the original location of the container would have been if top and left attributes are left as zeros.

I solved my problem by using position:absolute for the inner div containers and set the outer div container to position:relative top and left equal to zero.

All ended well. Thanks for your input.