HTML5 Sample 2, Fluid

Left column - Separate Scrolling, Right Body with Header

View Sample

Click in dotted area to select, then CTRL-C to copy, CTRL-V to paste.

<!DOCTYPE html>

<html lang="en">

<head>

<title> Page Title </title>

<charset="utf-8" />
<mrta name="viewport" content="width=device-width,initial-scale=1" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="description" content="Simple HTML5 sample version 2. Fluid design will display on both narrow and wide viewport." />
<meta name="keywords" content="html5,fluid,viewport,css,zwebster" />
<meta name="author" content="zwebster.com" />


<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<style>
html {
max-height:100%;max-width:100%;
padding:0;
margin:0;
border:0;
background:#ffffff;
}
body {
font-family: Verdana, Arial, sans-serif;
}
#navbar {
float:left;width:26%;height:100%;overflow-y:auto;
position: fixed;top:0px;left:0px;
margin:0px; padding:10px 0px 0px 10px;
font-size:.8em;
color:#333333;
background:#e8e8e8;
}
#navbar p{color:#333333; margin:0px;text-align:left;}
p {
font-size:.9em;
}
#hdrbox {
position:absolute;display:inline;
top:0px;
left:30%;float:left; border:0px; margin:0px 0px; padding:0px 0px 0px 10px;
min-width:50%;width:67%; height:8em;
color:#333333;
background:#8dd8e6;
}
#pageContent {
position:absolute;display:inline;
float:left;left:30%;
margin:0px 0px 0px 10px; padding:10px 0px 0px 10px;
top:8em;
width:67%;min-width:50%;
background:#ffffff;
}
#canvas {
left:30%;
width:67%;
}
</style>


</head>

<body>

<header>
<div id="hdrbox">
<div id="header">
<a href="http://www.zwebster.com">
<article>
<canvas id="canvas"> Your browser doesn't support the <code>canvas</code> element
</canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");
var grad = ctx.createRadialGradient(230, 30, 20, 180, 40, 100);
grad.addColorStop(0, "orange");
grad.addColorStop(0.5, "white");
grad.addColorStop(1, "lightblue");
ctx.fillStyle = grad;
ctx.fillRect(0, 0, 300, 140);
ctx.font = "20px sans-serif";
ctx.fillText("zwebster.com", 10, 40);
ctx.strokeText("zwebster.com", 10,40);
ctx.font = "12px sans-serif";
ctx.fillText("Fast SEO Friendly Websites", 40, 80);
ctx.strokeText("Fast SEO Friendly Websites", 40,80);
ctx.fillText("CPanel Control Panel for easy website management", 40, 100);
ctx.strokeText("CPanel Control Panel for easy website management", 40,100);
ctx.fillText("New light on old sites", 300, 70);
ctx.strokeText("New light on old sites", 300,70);
</script>
</article>
</a>
</div>
</div>
</header>

<div id="navbar">
Left Column
<br />
<a href = "sample-html5-2.php">Back to HTML5 page</a>
<br />
<br />
<br />
<br />
<br />
<div style="border-style:dotted;width:80%;height:20em;margin:4%;">
</div>
<br />
<br />
<br />
<br />
<br />
<div style="border-style:dotted;width:80%;height:20em;margin:4%;">
</div>
<br />
<br />
<br />
<br />
<br />
<div style="border-style:dotted;width:80%;height:20em;margin:4%;">
</div>
</div>

<div id="pageContent">
<br />
<br />Here we have tweaked the CSS from html5-1 version. We have given the CSS a fluid definition.

<br />Each block element needs control with css.
<br />
<br />Go ahead; Narrow you browser window (viewport); Watch the page parts follow. This approach displays on small devices and large monitors.
<br />
<br />In html5 sample 3 We will place images; which scale to the viewport.
</div>
<footer>
</footer>
</body>
</html>