26
Replies
Yeah, mostly! I just want to bottomdiv to stick with the bottom even I resize my browser window. So the margin between the content div and the bottom div will changed depends the size of my browser window. But the margin between these 2 divs have to remain at least 10px if I smaller my browser size. The bottom div need to stick in the bottom whatever I do.
For best cross browser rending, simply build your site logically from top to bottom & everything will fall into place. BTW, no positioning is required for any of this.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Document, 1-Col</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<style>
* {
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
img {
max-width: 100%;
vertical-align: baseline
}
body {
padding: 0;
width: 90%; /**adjust width in px or % as required**/
margin: 0 auto; /**this is centered**/
background: #F5DD83;
color: #2294AE;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 100%;
box-shadow: 2px 2px 4px #333;
}
header {
margin: 0;
padding: 0 1%;
width: 100%;
background: #B00202;
color: #FFF;
}
header h1, header h2 {
display: inline;
color: #F5DD83;
padding: 0 3%;
}
article {
padding: 2%;
background: #FFF;
}
nav { background: #69C; }
footer {
background: #B00202;
color: #FFF;
text-align: center;
margin: 0;
}
</style>
</head>
<body>
<!--begin header-->
<header>
<h1>Sitename</h1> <h2>Some pithy slogan...</h2>
</header>
<!--begin main content-->
<article>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! Maecenas quis velit nisl, volutpat viverra felis. Vestibulum luctus mauris sed sem dapibus luctus. Pellentesque aliquet aliquet ligula, et sagittis justo auctor varius. Quisque varius scelerisque nunc eget rhoncus. Aenean tristique enim ut ante dignissim. </p>
</article>
<!--begin footer-->
<footer>
<!--begin navigation-->
<nav>Horizontal menu goes here...</nav>
<small>© 2014 Your Site Name. All rights reserved</small> </footer>
</body>
</html>
This is what it looks like in browsers:
Nancy O.
@Jon, I've seen Viewport Units successfully used for Typography. But never quite this way before.
@hinc94, Browser support for Viewport Units is still dicey:
http://caniuse.com/viewport-units
My Android Jelly Bean 4.1 hates it 
Nancy O.
In Safari 7
There is no gap if Im not viewing it in full screen
If I switch to full screen mode in safari 7, there is a white gap between the bottom div and the bottom of the screen, so I assume the gap expands depends on the size of the browser window. Therefore, if someone uses a larger monitor such as 27 inch to view my website, the gap would probably getting much larger.
AdChoices