How would you do it without using ap divs?
With default CSS positioning, margins, floats, classes, background-colors and borders.
To illustrate, Copy & Paste the following code into a new, blank HTML document. Preview in browsers with increased/decreased text sizes. You can't break this layout because it's cohesive. Your APDiv layout falls apart when text size is increased in browsers.
<!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>Example CSS Layout, no APDivs</title>
<style type="text/css">
/**add browser scroll to short pages**/
html {overflow-y:scroll; font-size:65.25%;}
body {
margin:0;
padding:0;
font-size: 1em;
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
background-color:#FFFFCC;
color:#4F5972
}
#header {
margin:0;
padding:0;
min-height: 100px;
}
#nav {
margin:0;
padding:0;
min-height: 22px;
background-color:#4F5972;
color: #FFF;}
#UpperContent {
margin:0;
padding:0;
background-color:#CABA66;
min-height: 200px;}
#LowerContent {
margin:0;
padding:0;
background-color: #FFF;
min-height: 200px;}
#footer {
margin:0;
padding:0;
min-height:100px;
border-top:4px solid silver;
}
/**RE-USABLE CLASSES**/
.section {
width:920px;
margin:0 auto; /**with width, this is centered on screen**/
padding:0 12px 0 12px;
}
.right {text-align:right}
.center {text-align:center}
/**FLOATS AND CLEARING**/
.floatLt {float:left; width:50%}
.floatRt {float:right;width:50%;
}
.floatRt:after, .floatLt:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/**TEXT STYLES**/
h1, h2, h3, h4, p {margin:0; padding:0}
#header h1 {
font-size:4.75em;
font-family:Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-style: oblique;
color:#CABA66;
text-shadow: 5px 2px 5px #000;
/**shadows for IE**/
filter: dropshadow(color=#000000, offx=5, offy=2);
}
#header h2 {
margin-top:12px;
font-size: 1.75em;
color:#000;
margin-right: 240px;}
</style>
</head>
<body>
<!--begin header -->
<div id="header">
<div class="section">
header here...
<h1 class="center">Lapel High School</h1>
<h2 class="right">"Home of the Bulldogs!"</h2>
</div>
<!--end header --></div>
<!--begin navigation -->
<div id="nav">
<div class="section">
Navigation menu here
</div>
<!--end navigation --></div>
<!--begin upper content -->
<div id="UpperContent">
<div class="section">
<div class="floatRt">
<p class="right">Float right - upper content</p>
</div>
<p>Upper content...</p>
</div>
<!--end upper content --></div>
<!--begin lower content -->
<div id="LowerContent">
<div class="section">
<div class="floatRt">
<p class="right">Float right - lower content</p>
</div>
<p>Lower content...</p>
</div>
<!--end lower content --></div>
<!--begin footer -->
<div id="footer">
<div class="section">
<div class="floatLt">
<p>Float left - © 2012 footer text</div>
<div class="floatRt">
<p class="right">Float right - more footer text, blah, blah, blah, blah, blah...</p>
</div>
</div>
<!--end footer --></div>
</body>
</html>
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb
http://alt-web.blogspot.com/
