for d_p (et.al.) with appreciation for a very clever scheme.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!--
http://www.sitepoint.com/forums/showthread.php?888542-basic-layout-and-margins-etc&p=5196011#post5196011
Thread: basic layout and margins etc.
2012.09.28 02:28
johnsmith153
Code by: dresden_phoenix
Quote: "In short, there is no panacea in web design... only clever situational thinking... the quicker one accepts that the better off one is."
n = number of segments in a row.
s = % width of one segment in a row.
m = number of segments in a multi-segment column.
w = % width of a multi-segment column
100 - 2(n-1)
------------ = % width of one segment = s
n
s + ( m - 1 )( s + 2 ) = % width of a multi-segment column = w
All fractions are accounted for between 1 and 1/10.
-->
<head>
<title>dresden_phoenix 3</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="content-language" content="en-us">
<style type="text/css">
body {
margin:20px 22px 20px 20px;
}
.outer {
display:table;
width:100%;
}
.box {
border:1px solid red;
background-color:#fdd;
text-align:center;
padding:4px 0;
margin-top:8px;
}
.full {width:100.0000%;}
.half {width:49.0000%;}
.onethird {width:32.0000%;}
.twothirds {width:66.0000%;}
.onefourth {width:23.5000%;}
.threefourths {width:74.5000%}
.onefifth {width:18.4000%;}
.twofifths {width:38.8000%;}
.threefifths {width:59.2000%;}
.fourfifths {width:79.6000%;}
.onesixth {width:15.0000%;}
.fivesixths {width:83.0000%;}
.oneseventh {width:12.57143%;}
.twosevenths {width:27.14286%;}
.threesevenths {width:41.71429%;}
.foursevenths {width:56.28571%;}
.fivesevenths {width:70.85714%;}
.sixsevenths {width:85.42857%;}
.oneeighth {width:10.7500%;}
.threeeighths {width:36.2500%;}
.fiveeighths {width:61.7500%;}
.seveneighths {width:87.2500%;}
.onenineth {width:9.3333%;}
.twonineths {width:20.6667%;}
.fournineths {width:43.3333%;}
.fivenineths {width:54.6667%;}
.sevennineths {width:77.3333%;}
.eightnineths {width:88.6667%;}
.onetenth {width:8.2000%;}
.threetenths {width:28.6000%;}
.seventenths {width:69.4000%;}
.ninetenths {width:89.8000%;}
.full,
.half,
.onethird,
.twothirds,
.onefourth,
.threefourths,
.onefifth,
.twofifths,
.threefifths,
.fourfifths,
.onesixth,
.fivesixths,
.oneseventh,
.twosevenths,
.threesevenths,
.foursevenths,
.fivesevenths,
.sixsevenths,
.oneeighth,
.threeeighths,
.fiveeighths,
.seveneighths,
.onenineth,
.twonineths,
.fournineths,
.fivenineths,
.sevennineths,
.eightnineths,
.onetenth,
.threetenths,
.seventenths,
.ninetenths {
float:left;
margin-right:-2px; /* compensates for the 1px border */
}
.half + div,
.onethird + div,
.twothirds + div,
.onefourth + div,
.threefourths + div,
.onefifth + div,
.twofifths + div,
.threefifths + div,
.fourfifths + div,
.onesixth + div,
.fivesixths + div,
.oneseventh + div,
.twosevenths + div,
.threesevenths + div,
.foursevenths + div,
.fivesevenths + div,
.sixsevenths + div,
.oneeighth + div,
.threeeighths + div,
.fiveeighths + div,
.seveneighths + div,
.onenineth + div,
.twonineths + div,
.fournineths + div,
.fivenineths + div,
.sevennineths + div,
.eightnineths + div,
.onetenth + div,
.threetenths + div,
.seventenths + div,
.ninetenths + div {
margin-left:2%;
}
.row + div {
margin-left:0;
clear:left;
}
</style>
</head>
<body>
<div class="outer">
<div class="box full row">1</div>
<div class="box half">1/2</div>
<div class="box half row">1/2</div>
<div class="box onethird">1/3</div>
<div class="box twothirds row">2/3</div>
<div class="box onefourth">1/4</div>
<div class="box threefourths row">3/4</div>
<div class="box onefifth">1/5</div>
<div class="box fourfifths row">4/5</div>
<div class="box twofifths">2/5</div>
<div class="box threefifths row">3/5</div>
<div class="box onesixth">1/6</div>
<div class="box fivesixths row">5/6</div>
<div class="box oneseventh">1/7</div>
<div class="box sixsevenths row">6/7</div>
<div class="box twosevenths">2/7</div>
<div class="box fivesevenths row">5/7</div>
<div class="box threesevenths">3/7</div>
<div class="box foursevenths row">4/7</div>
<div class="box oneeighth">1/8</div>
<div class="box seveneighths row">7/8</div>
<div class="box threeeighths">3/8</div>
<div class="box fiveeighths row">5/8</div>
<div class="box onenineth">1/9</div>
<div class="box eightnineths row">8/9</div>
<div class="box twonineths">2/9</div>
<div class="box sevennineths row">7/9</div>
<div class="box fournineths">4/9</div>
<div class="box fivenineths row">5/9</div>
<div class="box onetenth">1/10</div>
<div class="box ninetenths row">9/10</div>
<div class="box threetenths">3/10</div>
<div class="box seventenths row">7/10</div>
</div>
</body>
</html>
