[css-d] Fill the page, but keep your border

2008-05-27 Thread Lisa Wilcox
Stephen,
Kudos to you on this. I personally found this very useful on a project of
mine.
Cheers,
Lisa Wilcox


For a long time I have been trying to find a way to create a page which
fills the viewport but leaves a border around the content. For example, a
div which is 100%-4em wide and high, with a 2em border.

Unfortunately the css box model doesn't make this easy.

I have found a way to do this with css which I believe is novel:

http://www.sfnelson.org/css-demo.html

In essence, I use a hidden floating div with height: 100% and margin: -4em.
This marks the bottom of the div. Then, I create the content div, and place
another hidden div inside it which has float: none. This stretches the
content box below the floating div.

I hope this is useful to someone.

Regards,

Stephen Nelson

__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/


[css-d] Fill the page, but keep your border

2008-05-25 Thread Stephen Nelson
For a long time I have been trying to find a way to create a page which
fills the viewport but leaves a border around the content. For example, a
div which is 100%-4em wide and high, with a 2em border.

Unfortunately the css box model doesn't make this easy.

I have found a way to do this with css which I believe is novel:

http://www.sfnelson.org/css-demo.html

In essence, I use a hidden floating div with height: 100% and margin: -4em.
This marks the bottom of the div. Then, I create the content div, and place
another hidden div inside it which has float: none. This stretches the
content box below the floating div.

I hope this is useful to someone.

Regards,

Stephen Nelson
__
css-discuss [EMAIL PROTECTED]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/