CSS Sticky header, footer and sidebar - html

Question

I have a web page with a sticky header, sticky sidebar and sticky footer but can't get the content to be padded on the right(padding just gets ignored) and my in-page links don't work correctly. I want to do this with CSS ONLY.
http://jsfiddle.net/C7v9f/
I know there are many other similar questions but their solutions either don't work; their too old; they've never been answered; they use jQuery, JavaScript etc. or they fall apart after adding things like line-height or padding.
html, body {
height: 100%;
color: #fff;
}
body, p {
margin: 0;
padding: 0;
}
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
overflow: auto;
background: #888;
}
#header {
height: 55px;
background: #222;
position: fixed;
width: 100%;
z-index: 4;
}
#SC-wrap {
float: left;
margin-bottom: 40px;
}
/* BEGIN HEADER NAV */
#nav {
padding-left: 32%;
}
#nav li{
position: relative;
display: inline;
color: white;
}
#nav a {
display: inline-block;
padding:10px;
}
#nav ul {
position: absolute;
/*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */
left:-9999px;
margin:0;
padding:0;
text-align: left;
text-decoration: none;
}
#nav ul li {
display: block;
}
#nav li:hover ul {
left:0;
}
#nav li:hover a {
text-decoration: none;
background: darkgrey;
}
#nav li:hover ul a {
text-decoration: none;
background: #B8B8B8;
}
#nav li:hover ul a:hover{
text-decoration: none;
background: #CCCCCC;
}
#nav ul a{
white-space: nowrap;
display: block;
border-bottom:1px solid #ccc;
color: white;
text-decoration: none;
}
#nav a {
text-decoration:none;
color: blue;
}
#nav a:hover {
text-decoration:none;
background: #f1f1f1;
color: blue;
}
/* END HEADER NAV */
#sidebar {
background-color: green;
width: 150px;
height: 100%;
position: fixed;
line-height: 2em;
font-size: 1.2em;
z-index: 2;
text-align: center;
padding-top: 6%;
overflow-y: auto;
}
#sidebar a {
text-decoration: none;
}
#sidebar a:hover {
background-color: grey;
}
#content {
padding-right: 250px;
width: 100%;
padding-top: 100px;
font-size: 1.2em;
line-height: 1.6em;
z-index: 1;
text-align: left;
padding-left: 200px;
}
#footer {
position: fixed;
bottom: 0px;
height: 40px;
width: 100%;
background: #222;
z-index: 4;
}

Answer 1

The padding on the right is there, the content is just too wide. To make the padding not be included in the width of the element use box-sizing:border-box Demo
#content {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
... Your other styles ...
}