Simple App Layout

Based off of: http://stevesanderson.github.com/fixed-height-layouts-demo/two-columns.html

by bgrins

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width" />
        
        <style type="text/css">
            /* Pane configuration */
            .left.col { width: 250px; }
            .right.col { left: 250px; right: 0; }
            .header.row { height: 75px; line-height: 75px; }
            .body.row { top: 75px; bottom: 50px; }
            .footer.row { height: 50px; bottom: 0; line-height: 50px; }
        </style>
    </head>
    <body>
        <div class="left col">
            <div class="header row">
                Navigation
            </div>
            <div class="body row scroll-y">
                <ul class="listview">
                    <li class="selected">One</li><li>Two</li><li>Three</li><li>One</li><li>Two</li><li>Three</li>
                    <li>One</li><li>Two</li><li>Three</li><li>One</li><li>Two</li><li>Three</li>
                    <li>One</li><li>Two</li><li>Three</li><li>One</li><li>Two</li><li>Three</li>
                    <li>One</li><li>Two</li><li>Three</li><li>One</li><li>Two</li><li>Three</li>
                </ul>
            </div>
            <div class="footer row">
                Icons go here
            </div>
        </div>
        <div class="right col">
            <div class="header row">
                View or edit something
            </div>
            <div class="body row scroll-y">
                <h3>Here are some other controls</h3>
                <ul class="listview inset">
                    <li>One</li><li>Two</li><li>Three</li>
                </ul>

                <p>... and here's a horizontally-scrollable thing:</p>

                <div class="scroll-x tiles">
                    <ul>
                        <li>Asia</li>
                        <li>Africa</li>
                        <li>America</li>
                        <li>Antarctica</li>
                        <li>Australia</li>
                        <li>Europe</li>
                    </ul>
 ...

CSS

/* Generic pane rules */
body { margin: 0; }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }

/* Workaround: in landscape mode, IEMobile makes bottom toolbar overlap the page, so shorten the page by 75px to compensate */
@media screen and (orientation:landscape) { .iemobile .page { bottom: 75px; } }


/* Very rough, 5-minute effort at iOS-like styles. I'm sure you can do better... */

body { font-family: 'Helvetica Neue', Arial, Sans-Serif; }
.header, .footer {
    color: #eee; background: #696f77; text-shadow: 1px 1px 1px rgba(0,0,0,0.5); padding: 0 0.5em;
    background: -webkit-linear-gradient(top, #696f77 0%,#28343b 100%); background: -ms-linear-gradient(top, #696f77 0%,#28343b 100%); 
}
.header { font-size: 1.4em; }
.body { background: #ddd }
.right.col { border-left: 1px solid black; }
.right.col .body { padding: 0 1em; }
.listview { padding: 0; margin: 0; font-weight: bold; color: #444; }
.listview li { list-style-type: none; background: #eee; padding: 1em; border-top: 1px solid #aaa; border-bottom: 1px solid #fff; }
.listview li.selected { background-color: #37F; color: White; }
            
.listview.inset { margin: 1em 0; }
.listview.inset li { background: white; border: 2px solid #aaa; border-bottom-width: 0; }
.listview.inset li:first-child { border-radius: 1em 1em 0em 0em }
.listview.inset li:last-child { border-radius: 0em 0em 1em 1em; border-bottom-width: 2px; }
            
.tiles { overflow-y: hidden; }
.tiles > ul { width: 1175px; }
.tiles ul { margin: 0; padding: 0; white-space: nowrap; }
.tiles li { list-style-type: none; display: inline-block; background-color: #080; width:150px; height: 150px; padding: 1em; color: White; margin: 5px; font-weight: bold; zoom:1; *display: inline; }