September 2, 2012
Footer fixed!
America's long national nightmare is over! Jersey Shore is canceled! (That sound you hear is your local library having a party!)
More importantly, a major problem with this website has finally been resolved. I thought I'd share why it was like that to begin with in order to spread the word on how to set up a website layout like the one that I've been using for about a year now.
I'd like to point out that as of this post, Jill.js and Poly.js are now integrated into this blog and that Jill.2.0a.js (formerly Jill.1.3a.js), which means that in this post (and any that follow that need a quick illustrated example), we can integrate them with ease.
Firstly, the horizontal elements must be set up first.
Secondly, the main body needs two colums. One that float:left, the other float:right.
Finally, one more piece to the puzzle. A <div style="clear:both;"></div> between the #content and the #footer divs. It will appear invisible but it is very important.
A few other things to note: Don't set the position CSS attribute for #header, #content, #footer, #main, #side, or the <div> that uses clear. It is unnecessary. If you set postion:absoulte on #side, the footer will jump up into the content area so don't do that. Also, don't set positon:relative to #side either or it will disappear. It's got something to do with using float:right. You can use position on the elements inside these elements, but if you want the layout I am using to work, don't use position at all! The sizes of these elements should also be in percentages as concrete values cause elements avoid appearing on the same level (especially #main and #side). Setting min-width on your percentange set elements is a must. For instance, setting width:90%; on #header, #content and #footer should also have min-width:1000px;. Likewise, if you set your #main and #side widths to 70% and 30%, you should probably set the min-widths to 700px and 300px.
You might also want to consider setting the margins on the <body>, #header, #content, and #footer to margin: 0 auto; so it appears center to the screen.
I'm glad I got this resolved. Now my site actually looks professional and I can focus on improving the header next.
