So if you’ve been reading me for a while or you follow me on Twitter you probably know I’m a fight fan.

I’ve started building a sports app related to fighting sports and I’m starting with an HTLM5 app that will run adaptively in any size browser.

I didn’t find an example that did what I want.

My desire was to place the functionality inside a DIV that would take up most of the width of the screen, scale with the size of the screen but ONLY up to 960 pixels.

Like this is the browser window is greater that 960px.

adapt-proto-1

And like this when the browser window is less than 960px.

adapt-proto-2

Here’s the code I came up with.

Simple, but meets my needs.

<html>
    <head>
        <title></title>
        <style type="text/css">
		body {
			background-color:#b0c4de;
		}

		div {
		    width: 96%;
		    max-width: 960px;
		    height: 100px;
		    background-color: white;
		    position: absolute;
		    top:20px;

		    left: 0;
		    right: 0;
		    margin: auto;

		}
        </style>
    </head>
    <body>
	    <div>
	    	--- app content ----
		</div>
    </body>
</html>