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.