How do I create sticky footers (one that always stays at the bottom of the browser)

I would like to create a sticky footer for a site I have in mind, but I am not sure if CSS Sculptor has the ability to do it.

Just to clarify what I mean by sticky footer... It would be a div that no matter how long or short the page content is, the footer div will always stick to the bottom of the browser window and never move even when scrolling; it will also remain on top of any content that is scrolling underneath it.

In fact, it would be useful to know how to create sticky headers and side bars too.

How can I acheive this in CSS Sculptor?

Thanks

Mat

Unfortunately this is not a feature that is part of the features of CSS Sculptor, but you can modify the css fairly easily to get this working. You will have to set the position attribute on the header/footer to get it to stick. So in the screen.css file, find the css section that ends with #header. For example:
#outerWrapper #header {
background-color: #a8a2d1;
border-bottom: solid 1px #656586; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}

You will have to add position:fixed; into that block so for my example it will look something like this:
#outerWrapper #header {
background-color: #a8a2d1;
border-bottom: solid 1px #656586; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
position:fixed;
}

For the footer, you will find the block of css labeled with an ending #footer and you will have to add both the position:fixed; and bottom:0;