I have a slight problem regarding a page i am designing. I am trying to center align my entire site using css and to a certain extent i have done this. The problem is i have a large amount of white space at the bottom of the page and most of the positioning seems to be very random. The tutorial i found told me to position everything inside the <div> to be aligned as relative but i have yet to discover what they are relative to.

The page can be found here http://www.bbcomputing.co.uk/testing/index.php

and the style sheet here

http://www.bbcomputing.co.uk/testing/style.css

Any help, as always, is greatly appreciated.

Matt

matt@bbcomputing.co.uk

www.bbcomputing.co.uk

the whitespace isn't olny at the bottom. i have 1024*768 with firefox, and a horizontal scrollbar shows up, but when scrolled will only reveal a big whitespace at the right.

I don't know why that happens :D

Despite what people said, I still use tables where I found that it's not possible or hard to do with css.

For example, to centerize a site, I'll create a 1 row and 1 column table immediately after [body], and put everything else inside it.

Then, center aligning, or even vertical, will be easy. And to my experience, this table-based alignement is more browser friendly than using css.

An easy to see sample is my contact page above. Here's the CSS

I don't mean to tell you to re-code your whole site. It would be great if you can solve your problem by keep using CSS :)

---
Site of the Day

Thankyou for your reply it was very helpful. Luckily the site is only the homepage for the moment so recoding it is easy enough. However i do wish to keep using CSS instead of having to revert to tables. As i said the center alignment of the whole thing is the easy part, it is the relative positioning of the elements in relation to the enclosing div tag which i wish to know more about.

Matt

matt@bbcomputing.co.uk

www.bbcomputing.co.uk

As I have found after a lot of experimentation, and reading books and tutorials who all say different things, most of which do not work, is:

ABSOLUTE POSITIONING: This is relative to the containing/parent element.

RELATIVE POSITIONING: This is relative to where the element would be in the normal flow of things.

For example, if you had
<div id = "side bar"> (with "top: 100px;")
- then some other stuff here
<div id = "menuheader">
....
</div>
</div>

If you set the menuheader to "top: 50px,",
with ABSOLUTE POSITIONING, it would start 50px from the top of the side-bar - i.e. 150px from the top of the screen. This would be the case even if there was something else already there.
With RELATIVE POSITIONING, it would just leave a gap of 50px from where you had got to , and then put itself at the end of that gap.

I have found that relative positioning is useful if you are only changing the position of one item in a flow of items, but if you use it too freely, it can put everything else out of alignment. That is probably why your positioning appears to be random.