Webpage has a bunch of dead space at the bottom

[jschapansky]

SO... I am new to the site and looked around for a bit, forgive me if I didnt find it... but, I have a website that works perfectly fine. I decided that I want to make the site a bit prettier and center the page in all browsers. After a bunch of google, since thats how I learn code, I have come up with this css:

DIV.container{
width:760px;
Height:1100px;
Top: 20px;
margin: auto; 
BORDER-RIGHT: Black 3px solid;
BORDER-LEFT: Black 3px solid;
BORDER-TOP: Black 3px solid;
BORDER-BOTTOM: Black 3px solid;
BACKGROUND-COLOR: #e7e3db;
}

But when I am working the html in frontpage (yes I am a code rookie that is hacking the crap out of it) all my locations from the top are in negative pixels. like this:

<div style="position: relative; width: 100px; height: 100px; z-index: 7; left: 40px; top: -1530px" id="layer9">
<img border="0" src="attention.gif" width="114" height="102">
</div>
<div style="position: relative; width: 534px; height: 105px; z-index: 3; left: 180px; top: -1640px" id="layer10">

The resulting page looks fine, but there is a whole bunch of dead space at the bottom of the page. I dont know how to get rid of it. any ideas? Is there any info I may be missing you could use to help me?

[htmlbasictutor]

div.container should be:

DIV.container{
width:760px;
margin-left: auto;
margin-right: auto;
BORDER-RIGHT: Black 3px solid;
BORDER-LEFT: Black 3px solid;
BORDER-TOP: Black 3px solid;
BORDER-BOTTOM: Black 3px solid;
BACKGROUND-COLOR: #e7e3db;
}
now your container will be centered horizontally on the page.

You are creating a problem for yourself letting FP use absolute positioned containers. a) all that styling should be in the stylesheet b) absolute positioning can cause a cross browser compatibility problem as each browser interprets space and measurements differently so you need to be an experienced coder (or practice alot) to get it right.

If my CSS above doesn't solve your space at the bottom of the page you will have to resort to removing the absolute positioning of your other containers and reorder your coding in the order you want them to appear visually then sort out width and other formatting with CSS.

[jschapansky]

Thanks, Ill just have to play more and position it all with CSS. No problems though, like I said the webpage is functional already, this is me just trying to make it pretty.. I wont publish the page until its done.

[SuzyUK]

Hi jschapansky and Welcome to WebmasterWorld!

It looks to me like your container is not containing and it's actually a fixed height 1100px! - if indeed that is the case and it's not containing it won't matter if it's centered or not..

The other divs I think are following it, not inside it as that explains why they need such large negative top margins (or co-ordinates) to "bring them up" over the top of the container.. their left positioning is what's controlling their "centering" not the container

relative positioning does not actually move the space the element needs, it just visually offsets the elements so those elements that have the large negative top co-ordinates still have the space reserved for them where they shouljd be (likely the cause of the huge gap!)

so I think there's too much positioning going on here, more is likely to make it worse ;) - It's never a good idea to fix the height of a container as no 2 people might be looking at the page with same resolution , or even if they are no 2 pages are likely to have the same amount of content and as soon as you have a page with less or more content you're either going to have the big gap you mention or the content will overflow it (no gap at all)

it might be best to learn a wee bit about CSS-P (CSS with positioning) without FP or Dreamweaver so you can then set them up not use positioned divs by default. I think they they call them, positioned divs, layers and that's what your code is doing, it's layering the divs as opposed to nesting them, or going with the flow..

Suzy