HI,
Code:
#header #box {
width:100%;
height:72px;
margin: 0px 0px 0px 0px;
....
That's coz that's how I thought the container and the contained elements should be defined.
Well apart from the facts that id's are unique to the page and can only be used once so it doesn't matter if you select the full path e.g. #header #box because #box would still target the box correctly. In your style #box would only be styles when its also inside #header, which is fine because thats what you wanted.
However, if it were a class such as #header .box then you would be unable to re-use the class box anywhere else on your page unless you redefined it again.e.g. #footer .box . So if the class is to be re-used then just define it as .box and you can use it anywhere. When you pre-fix it with another selector then you limit its use to that selctor only.
However, specifying #header #box is quite useful when you look through the stylesheet as it identifes exactly where the element applies especially when you come back to update the stylesheet at a later date.
You can also try to simplify things by targeting them without creating extra divs and classes or id's. If you just have say one image in the header you could just style it with #header img {margin-left:100px} etc and not have to add any extra code or nestings or identifiers to the html. Some people think they have to wrap everthing in a div whereas elements should preferably be wrapped in semantic html h1,p etc. A div is just a generic container used to group items together or to create something that doesn't exist normally in the html.
Also, I read somewhere a <div> element may contain a <p> element but not the vice versa, or something like that, I got an error something to that effect in my validation report as well, just deleted the <p>
divs are block elements and can contain other block elements such as other divs p's or anything elese you want. A paragraph is a special type of block level tag in that it can only contain inline elements (span, anchors etc). The logic is simple - either a selection of text is a paragraph or its not. If you nest a paragraph inside a paragraph you have in fact got 2 paragraphs so there is no need to nest at all. (The same applies to the heading tags).
Its good practice not to have bare text inside a div but to wrap that text inside the suitable html element such as a p, li, h1, h2 etc so that it makes semantic sense on its own.
I don't understand the relative positioning bit fully either, or maybe I do . Just using whatever's working.
Relative positioning is simple 
It simply moves the element in relation to itself. However (heres the crux of the matter) when you move an element with relative positioning you are in fact just placing a copy of the element onto the page. The original element remains on the page as "white space" in the original position. As far as anything on the page is concerned the element is where it always was and other elements will treat it as if it is still there. The element at the new position will have no effect on surrounding content except to overlap it if it gets in its way
Therefore there will appear to be a hole in the page where the element was. If you had a header on your page that was 200pixels high and you moved it downwards by 200px using relative positioning, then the next element you enter on the page would start at 200pixels from the top of the page leveing a 200px white gap above it. However it would start in the same place as the element you moved so everything would be on top of each other. Great if thats the effect you want and thats how relative is usually used to produce effect but preserve the original flow of the document.
Hope that hasn't confused you further 
Paul
CSS - First Try - w3 validation issues
Bookmarks