I’m trying to get the footer to move down with the the main content Content#box4, but after trying all sorts of positioning the best I have so far is having the content diving under the footer as the screen narrows. This is a problem between media queries 800 and 500.
We’ve mentioned your structure time and time again.
Your main content section is position:absolute which means that it will only ever be as wide as the floated sidebars (since you cleared them from the footer).
As Ryan said the problem is that Content is position:absolute and there is absolutely no way to get a footer underneath this unless you also absolutely place the footer at some phenomenal distance that can’t be possibly computed automatically.
Absolute elements are removed from the flow and cannot take part in any flow layout.
We have mentioned this possibly over 50 times now in previous threads (and with many screenshots showing the problem) and offered multiple solutions. I suggest that you read back through the posts as I have solved this problem numerous times for you.
…
…
CLUE: Don’t use absolute positioning for that middle column. Use some other method.