I recently started working on a new personal design called recyclmedia. However, i have already encountered a problem. I am trying to align the footer on the bottom of the page, so it is fixed to the bottom no matter how much i scale the page. Whenever i scale the page to a certain dimension on my screen, the header (title h1, h2 and lists) begins to overlap with the main content. I would like to have it so that, as soon as that certain minimal dimension has been reached, the y-axis will begin to overflow and and the header and main content wont overlap. I was hoping to do design this site with a tabless and divless format, but I am coming to realize that doing so would be nearly impossible, especially if I want to obtain these certain specifications. Right now, I have it temporary set up so that the header stuff is just below the main content. Any suggestions on a ways i could go about achieveing these specific design specifications? should i be looking into javascript to solve this problem?
Sounds like you need this for your footer: http://ryanfait.com/sticky-footer/ About the overlapping, don't use absolute positioning. Use relative positioning and let the elements 'fall' under each other. You can still use margins and paddings to adjust the spacing. The actual order of the page elements should be done in html, preferably semantically.