Question

consider the following:

http://jsfiddle.net/PxabT/10/

There are 3 divs hd, bd, ft. hd is fixed to the top. ft is fixed to the bottom.

I want the lime colored border to go totally around the white central area without increasing the height of the ft or hd divs.

How do I achieve that?

Many thanks!

edit: see http://jsfiddle.net/PxabT/15/ which is a step forward by changing the borders to padding.

Answer 1

I actually like this solution better. Add fixed left and right bars. Then use padding to keep content area from flowing into them. It is also very similar to your current code.

http://jsfiddle.net/PxabT/46/

body{
   margin: 0;
   padding: 0;
}
#left { position: fixed; height: 100%; width: 10px; left: 0; background-color: lime; }
#right { position: fixed; height: 100%; width: 10px; right: 0; background-color: lime; }
#bd{
    padding-top: 40px;
    padding-left: 10px;
    padding-right: 10px;
}