CODEWITHSUNDEEP
htmlcssanchor
mike
mike

Reputation: 1175

CSS Sticky header, footer and sidebar

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;
}

Upvotes: 0

Views: 1068

Answers (1)

Zach Saucier
Zach Saucier

Reputation: 25944

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 ...
}

Upvotes: 3

Related Questions