|
Fluid Layout
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css" media="Screen">
* .float-divider {
clear: both;
display: block;
background: pink;
height: 10px;
font-size: 10px;
line-height: 10px;
}
* .subSection1 {
background-color: red;
margin: 0;
padding: 5px;
}
* .subSection2 {
background-color: gold;
margin: 5px;
padding: 5px;
}
* .subSection3 {
background-color: yellow;
margin: 5px;
padding: 5px;
}
#main {
max-width: 700px;
}
#leftBar {
float: left;
width: 20%;
min-width: 75px;
}
#content {
float: left;
width: 60%;
min-width: 150px;
}
#rightBar {
float: left;
width: 20%;
min-width: 115px;
}
#leftBar * .subSection2 {
min-height: 43px;
}
#content * .subSection3 {
display: block;
}
#head {
float: left;
width: 35%;
min-width: 75px;
}
#detail {
float: left;
width: 65%;
min-width: 75px;
}
</style>
</head>
<body>
<div id="main">
<div class="subSection1">
<h2>main - 100%</h2>
<div id="leftBar">
<div class="subSection2">
<h3>leftBar -20%</h3>
</div>
</div>
<div id="content">
<div class="subSection2">
<h3>content - 60%</h3>
<span id="head">
<span class="subSection3">
<em>head - 35%</em>
</span>
</span>
<span id="detail">
<span class="subSection3">
<em>detail - 65%</em>
</span>
</span>
<span class="float-divider">divider</span>
</div>
</div>
<div id="rightBar">
<div class="subSection2">
<h3>rightBar -20%</h3>
</div>
</div>
<div class="float-divider">divider</div>
</div>
</div>
</body>
</html>
|