I need it for 2 columns. with content first. it's a basic header, main content, left nav and footer. It should come that way in the source code. So far I have only found solutions using javascript and faux images. Neither of which I want. I found another one but it does not work with IE7. what currently happens with this code below using DW is, it looks fine in Preview for Firefox but in IE6 once you move the mouse over the page it disappears altogether and moves to the bottom body { margin: 0; background: #dddddd url(bg.gif) repeat-x; line-height: 16px; padding-left: 5px; padding-right: 5px; } #content { margin: 0px auto; width: 780px; position: relative; overflow: hidden; } .header { width: 776px; height: 45px; margin: 0px 0px 0px 0px; padding: 20px 0 0 5px; border-top: 4px solid #000; background: #003366; color: #000000; } .left { float: left; padding: 0px 5px 0px 5px; margin: 0px 0px 0px 0; width: 193px; background: #f6f6f6; color: #red; position:relative; padding-bottom: 1001em; /* X + padding-bottom */ margin-bottom: -1000em; /* X */ } .right { float: right; width: 560px; margin: 0px 0px 1px 0px; padding: 5px 0px 0px 15px; color: #000; background-color: #FFFFFF; border-left: 1px solid #999999; border-bottom: 1px solid #ccc; position:relative; padding-bottom: 1001em; /* X + padding-bottom */ margin-bottom: -1000em; /* X */ } * html body { overflow: hidden } .footer { clear: both; color: #black; background-color: #FFFFFF; padding: 10px 0 10px 10px; border-top: 1px solid #cccccc; text-align: center; line-height: 13px; position: relative; padding-bottom: 10010px; margin-bottom: -10000px; } Code (markup): i used the padding-bottom and margin-bottom from a holygrail css fix without the column class as I just put it in the actual right and left classes. <body> <div id="content"> <div class="header"> <h1><a href="#">New Site</a></h1> </div> <div class="right"> </div> <div class="left"> </div> <div class="footer"> </div> </div> </body> Code (markup): it seems to work fine with a little html text but when I put a lot in there it disappears amd moves to bottom.
if you need texture going the whole distance, and faux columns won't cut it, there is only one reliable cross-browser ready solution. It's called a table. Put an empty TD first, then the content TD set to rowspan="2", then the left column TD all alone in a separate TR. Though given you only have two columns fixed width, I'd think faux columns would be the perfect solution even if it does mean using ONE image.
well, it seems to be working now. I took out all the overflow hidden, padding-bottom and margin-bottoms of 1000 and 1001 respectively. instead I used this: position: relative; z-index:3; 1 , 2 etc. for right and left and footer.. I believe my mistake was the footer having the negative padding and margins. now this was only tested in IE6 and Firefox. I'll see if it works in IE7 soon. I appreciate the tip on TD's and table positioning but I stay away from table a lot. Plus ever since I read in a study that two sites each with 5,000 backlinks from the same linkors, the nod goes to the CSS site to be above the table based-site..(simple code vs. more)
Do yourself a favor. Stop "drinking the SEO Kool-Aid" and listening to everything everybody tells you about SEO since most of it is crap nonsense that doesn't even fly to begin with. Now, I do applaud you for wanting to use semantic markup over layout tables here, but you need to realize that if you put your content above the menu, there is a chance that the search engine spiders may not be able to index all the content on your Web pages, meaning that if it were to happen, they wouldn't even find your menu. Sure, you can "correct" that by using an XML sitemap, but it's practically pointless anyway given that a sitemap page on your Web site can do the exact same thing and provide another means for your human visitors to navigate through your site as well (not everyone uses the menu to move through a site, some will use the search form if present, and others will use the sitemap since they're more comfortable browsing this way). Not only that, but there's also the issue of accessibility as well. While the content needs to be as close to the top as possible, it should come after the menu (with appropriate skip links included if the menus are especially large, which can be a burden for screen readers and mobile devices such as PDAs and cell phones). Now, with that out of the way, let's see what can be done here, ok? The first thing I'd do (and it's a personal preference) is throw Dreamweaver out of the window (or blow it out of an airlock). Second, are you trying to create a 100% equal height document model here using a header, two columns and a footer? If so, it's going to require some "creativity" on my part, but I think I'll be able to pull it off for you. I just need to know first.
I've been thinking on it, and I REALLY think faux columns is your best bet. http://battletech.hopto.org/for_others/lukas/template.html the directory is unlocked so you can grab the screen.css and one image. http://battletech.hopto.org/for_others/lukas It only needs one 91 byte image to work... 100% min-height, should do what you want, yes? I also made the content column fully dynamic, so if you want to make the layout semi-fluid or even completely fluid that's easy enough, just set it on #container and #footer. Remember, don't waste time stating widths on dynamic items when you have a perfectly good container around them.