Ok, I missed my coffee this morning. I know I can figure this out if I've got some caffeine and patience, but I don't have either of those things today.

What I need:

I'm making a site with tablet and mobile options and the mobile option I want to have my menu in a different spot for landscape, so I use media queries... thing is, I'm not sure how to put the menu where I want it.

So basically, I was thinking, what if I put everything where I want it and I made my main "content" div scroll and everything else "not" scroll, so it would be fixed in place but the content div would have overflow:scroll or something...

That leaves me with a couple of issues:

  1. How would I best make the entire layout fixed in place and not scrolling where I don't cover up the content div like I do with position:fixed?
  2. How would I take a vertical menu and divide it equally into 4 squares (not rectangles) -- especially with a fixed-width header and footer and not necessarily any specific screen-height?
  3. The content div needs to take up all of the space not occupied by the header, footer, and navigation... which means below the header, above the footer (both of which are also fixed) and to the right of the navigation, except in portrait or larger layouts where the navigation is horizontal and falls in the header, leaving the content div to span the full width.


What, in your opinion, is the most efficient way to accomplish this?

Thanks in advance.