ok... here is a site i'm building thanks to advice I've gotten on here. some if it is a bit advanced (the advice) but I'm learning on how to make pure CSS (and WC3 valid) sites. My problem is that the container div isn't going all the way to the bottom of the page... leaving the background exposed. You can take a look at it here http://www.chicagofashionguide.com/new here is my page code (still a bit sloppy, I know... I'm working on cleaning it up) and here is my CSS file I'm proud to say the site has been validated... this is my first one that is. I know there are prob. 100 things wrong with it but I'm trying to take things one step at a time and my main problem is the container isn't taking up the full page, as i said, leaving the background exposed. Any ideas? (I realize my CSS is a bit heavy but like i said, I'm taking it in steps and learning how to trim everything down)
There is no need for all of those div's. YOU HAVE DIVITUS! Learn how to use Selectors Descendant selectors Child and adjacent sibling selectors
I think I like this guy Though it's not just DIV's getting abused: <td width="59%" align="center"><div id="btn_designers"><h2><a href="#">designers</a></h2></div></td> <td width="41%" align="center"><div id="btn_photographers"><h2><a href="#">fashion photographers</a></h2></div></td> Code (markup): GAH, first off you've got H2, what do you need the DIV for, you've got TD's, make those TH's and what do you need the H2 for, there's only four items that are not grouped by row or column categories so what do you need the table for, and frankly, those appear to be buttons, not headers, so why are you marking them as headers? If they ARE headers for the content below them, then your source order for the headers makes no sense because you DIDN'T use TH. Things like that #main_navigation DIV should get the axe as it does nothing that can't be done to the UL directly, you have comments between floats which could be causing some IE issues (I've not looked that closely) and your comments could use a little help... <!-- search container --> <div id="search_cont"> No, I had no idea that <div id="search_cont"> would be the start of the search container - try this, axe the comment and call it search_container (though I prefer searchContainer at the moment to match .js styling guidelines)... If you use the full text as the class name, you don't need comments to say what it is, <div id="searchContainer"> spells it out pretty clear. Another 'wasteful comment' <!-- end search container --> </div> Of COURSE it's the end, that's what </div> means. This is actually MORE useful: <!-- #searchContainer --></div> Remember, don't waste comment space on explaining **** that ANYONE who's looking at the code should actually understand. You don't need to say 'end' because that's what </div> means... and putting the comment before the close usually prevents comments ending up between floats - important because IE has some REALLY WIERD quirks in that department... dissapearing content or worse the double render bug