alt131 - 1:52 pm on Jun 4, 2011 (gmt 0)

Hi IndigoSwing, I suggested min-width as you've already used it - and you are correct that creates issues for legacy browser versions that don't understand it. However, ie6 won't collapse the element below what is required to contain the content, so not so much troubles there. If you haven't already, you may find the discussion of using width and min-width [reference.sitepoint.com] together helpful.

I didn't comment previously as this is sample code so assumed a few things "missing", but note to take care with things like overflow: hidden; (set on the body and html). That means the browser won't produce scrollbars - and for me a straight copy/paste of your code defaulted to just over 1000px high. As that was greater than my viewport height most of the page content was inaccessible until I removed it. Also z-index only applies to elements that have a position.

IMO, for flexible designs remember the basics. To illustrate by example: A valid document with a heading, a couple para's and zero styles can be "read" on most every user agent, device and platform, regardless of the how much the user zooms the text size large, or how tiny the viewport - styling a document with the maximum flexibility is the easiest thing of all!