Try this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html>
<head>
<title></title>
<script type="text/javascript">
function doResize()
{
document.getElementById("box-contents").style.height=(document.documentElement.clientHeight-60)+"px";
}
window.onresize = doResize;
</script>
<style type="text/css">
body
{
background-color: black;
margin: 0px;
padding: 0px;
color: White;
font: 16px arial;
}
#content
{
margin: auto;
width: 780px;
height: 100%;
padding: 0 0;
}
div.rounded-box
{
position: relative;
background-color: red;
margin: 3px;
width: 780px;
padding: 0 0;
}
/*********************
GLOBAL ATTRIBUTES
*********************/div.top-left-corner, div.bottom-left-corner, div.top-right-corner, div.bottom-right-corner
{
position: absolute;
width: 20px;
height: 20px;
background-color: black;
overflow: hidden;
}
div.top-left-inside, div.bottom-left-inside, div.top-right-inside, div.bottom-right-inside
{
position: relative;
font-size: 150px;
font-family: arial;
color: red;
line-height: 40px;
}
/*********************
SPECIFIC ATTRIBUTES
*********************/div.top-left-corner
{
top: 0px;
left: 0px;
}
div.bottom-left-corner
{
bottom: 0px;
left: 0px;
}
div.top-right-corner
{
top: 0px;
right: 0px;
}
div.bottom-right-corner
{
bottom: 0px;
right: 0px;
}
div.top-left-inside
{
left: -8px;
}
div.bottom-left-inside
{
left: -8px;
top: -17px;
}
div.top-right-inside
{
left: -25px;
}
div.bottom-right-inside
{
left: -25px;
top: -17px;
}
div.box-contents
{
position: relative;
padding: 8px;
color: white;
}
</style>
</head>
<body onload="doResize();">
<div id="content">
<span>Header</span>
<div class="rounded-box">
<div class="top-left-corner">
<div class="top-left-inside">
•</div>
</div>
<div class="bottom-left-corner">
<div class="bottom-left-inside">
•</div>
</div>
<div class="top-right-corner">
<div class="top-right-inside">
•</div>
</div>
<div class="bottom-right-corner">
<div class="bottom-right-inside">
•</div>
</div>
<div class="box-contents" id="box-contents">
Contents go here, but it must be at least two lines to look any good.
<br>
Contents go here, but it must be at least two lines to look any good.
<br>
Contents go here, but it must be at least two lines to look any good.
<br>
</div>
<!-- end div.box-contents -->
</div>
<!-- end div.rounded-box -->
<span>Footer</span>
</div>
</body>
</html>
Good Luck
Answer please, why programmers make border around content? Is it specialy for compatible for low-resolution monitor (such as 640×480)?
I’d like Liquid Layouts, also because my monitor is 1650×1050 and border are large then content
Comment by sergeos — January 3, 2009 @ 7:17 pm