September 2, 2012
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
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
#side, or the
<div> that uses
clear. It is unnecessary. If you set
#side, the footer will jump up into the content area so don't do that. Also, don't set
#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
min-width on your percentange set elements is a must. For instance, setting
#footer should also have
min-width:1000px;. Likewise, if you set your
#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
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.