I just noticed an issue I'm having related to the content on almost all the pages on my site. I have the code below for the body and the #page div. The #page div is supposed to be like a wrapper that encompasses everything. I just tried putting in a border (border: 1px solid #FFFF00 for the #page div so I could see how everything lined up within it (since I have the same background-color for the body and the #page div I can't normally see this). When I added this yellow border, I found only one page where the border went around everything. On all the other pages, the border seems to either not close or to only go around the content near the top of the page or to go around nothing. I think this means that all the code that I have in the #page div is not being applied to most of the content on each of those pages. I'm having a hard time understanding why that border I inserted does not go all the way around everything (why the #page div does not seem to be including everything). I have the div properly closed at the bottom of the page (</div></body></html>) and this is even happening on pages where I have no validation errors. body { background-color: #000000; margin: 0px; } #page { width: 960px; font-size: 14px; font-family: verdana, sans-serif; color: #26D578; background-color: #000000; margin-left: auto; margin-right: auto; margin-top: 16px; }
Exactly, the wrapper alone can't explain much. There are 2 things you've messed up, just in the wrapper itself : The wrapper div MUST NEVER BE an ID! IDs are unique, therefore they can't be repeated. That's why the wrappers are always classes : classes aren't unique, they can be put multiple times in the same file. If you want to center a wrapper, use the property "margin: 0 auto;" other than "margin-left: auto; margin-right: auto;" (this combination is used to center the divs inside some wrappers. I think you can find the reason somewhere, I don't have time to write useless stuff). Defining the font family, color and size in a wrapper is comprehensible, but it's better to define the same in the body itself (all the elements will inherit the same properties, unless defined in the element itself). Show the demo of the error, that's the best way to identify it.
Thanks for responding. I seem to have solved the main problem I was addressing by just adding overflow: auto; to the #page div. I don't really understand why this works, but the border is now going around everything. I switched the font-family, font-size and color to the body like you suggested. It seems to work either way so I will probably leave it in the body. I also took out the margin-left: auto and margin-right: auto and replaced them with margin: 0 auto;. Although I don't know much about what the difference is between these, this also seemed to work just as well after switching it. In regards to the id-classes issue, perhaps you misunderstood how I was using it. Either that, or I still don't understand when to use id's vs. classes. The #page div that I am using as a wrapper for everything inside of the body is used multiple times on my website (which consists of many webpages), but is only used once on each individual webpage. My understanding was that you only need to use classes if you are using it multiple times with an individual webpage, which I am not.
Well, if that's your website structure, you could use IDs, however, it's highly recommended to use classes, for the reasons mentioned. Great you've managed to fix it!