rapmonkey wrote:There's no other way to do it other than specify it all in percentages? For example, I'd like to always have a 1px border and 2px margin.
Only if you "fudge" your percentages to allow for the fact that as the total display width decreases, a pixel takes up a greater percentage of the available space. This would result in values which take up all/most of the available width at, say 800px window width will end up with some unused space at 1200px width. If you use 1px borders and settle for using percentages for the margins/paddings, this variance can be minimized pretty well.
For instance, the following works pretty well until you get down to around 400px width, while still pretty good at 1024 width:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang='en'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1'>
<title>Test</title>
<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
font: medium arial, sans-serif;
}
.row {
margin: 0;
padding: 1%;
background-color: silver;
color: black;
clear: both;
}
.row div {
margin: 1%;
padding: 1%;
width: 15.5%;
background-color: white;
color: black;
float: left;
border: solid 1px black;
}
.clear {
font-size: 1px;
height: 1px;
line_height: 1px;
margin: 0;
padding: 0;
clear:both;
}
-->
</style>
</head>
<body>
<div class="row">
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<p class="clear"> </p>
</div>
<div class="row">
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<div>
<h3>Heading</h3>
<p>This is a test. It is only a test.</p>
<p>This has been a test.</p>
</div>
<p class="clear"> </p>
</div>
</body>
</html>
