Layout Problem, Using <div>

[Covey]

Hey i'm a bit of a beginner HTML coder and i'm updating my site. But i'm having a problem with layering <div>'s. It's causing my page to become to large in height.

You can see the site in action here - http://www.coveyinc.com/new/index.htm

or download the files here - http://www.coveyinc.com/new/Site.zip

Here is a pic to show you what i mean. - http://img255.imageshack.us/img255/7120/screenyho4.png (1440 x 900)

I know it's caused by how im layering my <div>'s im using the "position: relative" style which is causing them to leave a ghost which inturn makes the page think its bigger than it actually as, but due to my lack of knowledge i don't know any other way in which i can make layers.

Any help is appreciated, thanks.
If you need any more information just post and ill try and give it to you.

[oesxyl]

first problem is invalid markup:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.coveyinc.com%2Fnew%2Findex.htm

fix and validate and then post again in this thread. Probably validation would not fix the problems but will help a lot.

regards

[Covey]

first problem is invalid markup:

http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.coveyinc.com%2Fnew%2Findex.htm

fix and validate and then post again in this thread. Probably validation would not fix the problems but will help a lot.

regards

Ok, i've fixed all those errors.
But my page is still showing the big gap at the bottom, i think its because im using "<div style="position:relative; z-index: 0">. etc.
All i basically need to know is how to display 2 pictures on top of each other on a webpage then i should be able to fix my problem.

Thanks for your help so far.

[abduraooft]

Never combine top/bottom left/right properties with an relatively positioned element. Indeed there is no need to give this much of positions to create a layout like this.
Have a look at http://bonrouge.com/3c-hf-fixed.php and learn how to build a standard 3 column layout.

[oesxyl]

Ok, i've fixed all those errors.
But my page is still showing the big gap at the bottom, i think its because im using "<div style="position:relative; z-index: 0">. etc.
All i basically need to know is how to display 2 pictures on top of each other on a webpage then i should be able to fix my problem.

Thanks for your help so far.
You missunderstand few things. First is the position of the element in the code:
you must put the element in the normal flow, how you want to be displayed in the page:
- move NavLinksTop div before CentreBanner and after TopTextAd
- move LeftNavLinks before RightSkyscrapper
- is not clear for me yet if EliteSwithNav and EliteSwitchNavLinks must be before RightSkyscrapper but I'm sure that must be after LeftNavLinks so probably RightSkyscrapper will be last element( before footer)

Second is the way how you use pictures/images. I guess that could be used how it is but a better way was to use few images:
- one with the "EliteSwitch Next Generation"
- second with the top of the tabs with or without text and reuse it for each tab in first case or put in the normal flow in second case.
Let all this unchanged at this moment.

Third is that you don't need to to abuse position relative/absolute, z-index and top, left to position the elements. If there are in a normal position you could easy put almost anywhere you want.
I suggest to use an external css file and include it in page using link first because is easy to change the aspect without modifing the page and second because is load first being in the head section.

The first effect after puting elements in the normal flow will be that all that css will blow up and must be removed.

Before you start making this changes you must know that I'm not sure that I could fix it without reworking all the site, so you must decide if you take the risk or not. Anyway I will try to help you.

best regards