Hi -
I think it's hard for any of us to tell what it is
you're going for, exactly! [Thus a page would
help...]
I did try it out yesterday:
Code:
<!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>
<title>Test</title>
<style type="text/css">
*, html{
margin:0; padding:0;}
body{
width:100%; height:100%; margin:0; padding:0;
font-size:medium;}
div#contain{
font-family:"verdana", "tahoma", sans-serif; width:70%;
background:#ececec none; margin:0 auto; height:600px; padding-top:30px;}
div#main{
width:60%; margin:0 auto; padding:20px; border:3px double silver;}
#main p{
width:50%; margin:0 auto; background:white none; color:#333333; font-size:80%;
text-align:center;}
p#title{
border-top:1px solid black; border-bottom:1px solid black;}
/*original styles*/
.border {border-top-width:1px;border-bottom-width:1px;border-color:black;border-style:solid}
.font {font-size:1em}
.margin {margin-top:5px}
</style>
</head>
<body>
<div id="contain">
<div id="main">
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p>Text</p>
<p id="title">Title</p>
</div>
</div>
<div style="position:relative">
<div style="padding-top:20px;margin-top:4em;text-align:bottom">
<div class="border font">Title</div>
</div>
</div>
<div class="border" style="position:absolute;top:0">
<div class="font margin">Text</div>
<div class="font margin">Text</div>
<div class="font margin">Text</div>
<div class="font margin">Text</div>
</div>
</body>
</html>
I think em's are tricky for spacing because unlike px,
you never know how resizing the text will affect the layout.
Absolute positioning is also finicky since it takes
an element out of the doc's flow.
El
Vertical spacing with em
Bookmarks