Why does it not align properly

[leeboycymru]

I have a two column section of the site below, the left contains a form which sits nicely and the right contains a flash animation that just doesnt line up properly vertically.

http://www.ecristal.co.uk/en/Test/

In both IE6 and FF, it populates that right div but does not want to align itself up properly.

The only way I can do this is to put a negative amount against the 'top' css command, but this still does leave the same amount of gap below it so its def not the answer.

Has anybody had this before?

Cheers

Lee

 

[Vragabond]

I don't understand how you expect that flash to be higher. You are floating it to the right of the form and it does appear to the right of the form. However, looking at the design, it seems like you want to have it floating right to the header. So, move it up there then. That seems like the only option to me.

 

[leeboycymru]

Ye i can move it up there using top:-160px, but when i do it still leaves a gap beneath it of that same value.

So is it then the case that I use z-index to counter act that?

 

[Vragabond]

No. Z-index is the third dimension, imagine layers and layers between you and the computer screen. The higher the z-index the closer to you the layer it is and the lower the z-index the closer to the screen it is. Elements with high z-indices will thus cover elements with lower ones.

Changing the element's top property could be a solution, but shouldn't. If you do that on a relatively positioned element, you displace it. You visually move the element elsewhere while it still occupies the same space it would if it weren't displaced. If you need to move it like that, use margin-top.

BUT, YOU DON'T NEED TO MOVE IT. Did you read my first reply? You want to have the flash move floating to the left of the header. Now, is header floating? No. So, either float the header or put the floating to the right flash above the header. Then put everything else. It is easier to stack things in the order they come then to correct it later.

 

[leeboycymru]

I have pushed it up and as you an see it still leaves behind it a gap.

http://www.ecristal.co.uk/en/Test/

In Mozilla it doesnt allow the text to read to the edge of the page on the right and in IE it doesnt allow anything to it between the gap.

So if I know use a - top number to push the text up, in Mozilla the text will move up over the form and the flash, and in IE it will align correctly.

Lee

 

[eyec]

does this help?

{position: absolute; top: 3em; left: 25%; width: 650px; margin: 1em; padding: 1em 1.5em;}

setting the starting position to X% from the left.

 

[Vragabond]

eyec, that would confuse things even further. The element would just be hanging somewhere completely unconnected to all other elements on the page.

 

[leeboycymru]

Ok, i took the advice on the margin-top and it worked, and as you can see:

http://www.ecristal.co.uk/en/Test/

Everything is lineing up fine now, but i have taken away the flash on the right.

I need now to decide how to get it in there without it disruping the layout, which isnt easy.

Vragabon, i tried floating it to the left of the header and it just didnt seem to work, so ive gone back to the start to try and get it sorted this time.

Any further ideas?

lee

 

[leeboycymru]

It looks more of an IE issue, as in Mozilla it tucks up to the middle bit fine, but in IE the height of the flash on the right stops it from going any higher.

 

[Vragabond]

I don't know why you insist on using this negative margin/negative top idea, when I keep telling you it is inferior. Of course the solution I mentioned, about floating it right (sorry about that mistake) of the header, won't work right of the box. You will need to make your header smaller (but actually it is smaller) and your news ticker limited to make sure it does not interfere with the flash. But all in all, it will just be some limitations that are in place already, but not exercised. And after all of it, you will have a nice flowing code without any perilous negative margins.

 

[leeboycymru]

Hi Vragabond, thanks for keeping coming back, but i just worked it out..

I got rid of the negative margins, lostthe width on the text underneath the flash and tucked the whole div inside the center wrapper div, and it all worked out.

Thanks again for you advice, I still got some issues to deal with, but at least I have got over that issue.

As always, Im very grateful for all the help from this forum.

lee