I try to set my div 5px from the

HTML & CSS
1

Hello,
I just wanted to make a div that shows 5px from each edge of the browser. I mean left, right, top and the bottom. The only edge I still working on is the bottom. Any idea is welcome. It’s just a thing of my website that will be like a finishing touch of my website. I already try to find for a couple of days for this solution. Thank you very much.

Here you have my example: http://jsfiddle.net/QKYh4/show/


<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <title> - jsFiddle demo</title> 
        
        <style type='text/css'>
            body, html {
            margin: 0;
            padding: 0;
            }
            #demo {
            border: 1px solid black;
            height: 95%;
            margin: 5px;
            padding: 5px;
            position: absolute;
            }
        </style>
        
    </head>
    <body>
        <!DOCTYPE HTML>
        <html>
            <head></head>
            <body>
                <div id="demo">
                </div><!-- End demo -->
                
            </body>
        </html>
        
        
    </body>
    
</html>

You could edit it here http://jsfiddle.net/QKYh4/

Here is a demo picture of the final solution I want: http://img714.imageshack.us/img714/835/5pxfromedge.jpg

Thanks in advance!
grid

2

You can do it like this for ie7+:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin :0;
	padding:0;
	height:100%;
}
#outer {
	position:absolute;
	top:5px;
	bottom:5px;
	left:5px;
	right:5px;
	border:1px solid #000;
	overflow:auto;
}
</style>
</head>
<body>
<div id="outer"></div>
</body>
</html>

However you will need to control the overflow as all content will need to be within that element and can’t go below the fold. It doesn’t sound as though you have thought this through :slight_smile:

If you want the bottom border to stretch with content then you would need something more complicated like this.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Transparent shadow border on 100% high layout</title>
<style type="text/css">
/*Opera and IE sticky footer Fix*/
body:before {
	content:"";
	height:100%;
	float:left;
	width:0;
	margin-top:-32767px;/* negate effect of float*/
}
#outer:after {/* instead of using display table for ie8*/
	clear:both;
	display:block;
	height:1%;
	content:" ";
}
html, body {
	margin:0;
	padding:0;
	height:100%;
}
h1, p {margin:0 0 1em}
body {background:#fff;}
#outer {
	margin:-7px 5px 0;
	min-height:100%;
	position:relative;
	z-index:1;
	clear:both;
	border:1px solid #000;
	background:#fff;
}
* html #outer {height:100%;}
#top {
	height:12px;
	border-bottom:1px solid #000;
	overflow:hidden;
	margin:0 -1px;
	position:relative;
	background:#fff;
}
#main {
	padding:1px 20px;
	zoom:1.0;
}
</style>
</head>
<body>
<div id="outer">
	<div id="top"></div>
	<div id="main">
		<p>testing</p>
		<p>testing</p>
		<p>testing</p>
		<p>testing</p>
		<p>testing</p>
		<p>testing</p>
		<p>testing</p>
		<p>testing</p>
	</div>
</div>
</body>
</html>

The above will also work in IE6.

3

Hello,
First of all. Thanks for your help to guide me these ways. I will try which method will works in combination with my html design.

Greets grid