View Thread: A look at a CSS layout and screen shots from IE4.0 through IE7b2,

<!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" xml:lang="en" lang="en">

...skipping most <head></head> content...

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="style.css" />


<body>
<div><a name="topg" id="topg"></a></div>
<div id="wrap">

<div id="top">
<div id="logo"></div>
<h1>HEADER 1 TEXT HERE</h1>
</div>


<div id="navbar">
<div id="nav">
<h2><a href="/">HEADER 2 TEXT HERE</a></h2>
<ul><li><a href="/" class="active">Home</a></li><li><a href="furniture.html" class="inactive">LINK2</a></li><li><a href="about.html" class="inactive">LINK3</a></li><li><a href="contact.html" class="inactive">LINK4</a></li></ul>
</div>
</div>


<div id="main">
<h1>HEADER 1 TEXT - TOPIC 1 INTRO</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sagittis, leo a adipiscing tincidunt, massa erat ultrices lorem, non nonummy lorem risus ac orci.</p>
<ul>
<li>Unordered List - item here</li>
<li>List - item here</li>
<li>List - item here</li>
<li>List - item here</li>
</ul>
<div class="hr"></div>
<h1>HEADER 1 TEXT - TOPIC 2 INTRO</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis sagittis, leo a adipiscing tincidunt, massa erat ultrices lorem, non nonummy lorem risus ac orci. Integer dignissim neque tempor dui. Curabitur lacus nulla, porttitor id, malesuada ut, blandit id, quam. Fusce wisi. Aenean tortor diam, fringilla eu, placerat ut, viverra quis, diam. Vestibulum molestie. Maecenas cursus. Ut ultrices molestie justo. Donec ut sem. Suspendisse lectus. Ut condimentum sagittis odio. Cras cursus.</p>
<p class="infobox">ger dignissim neque tempor dui. Curabitur lacus nulla, porttitor id, malesuada ut, blandit id, quam. Fusce wisi. Aenean tortor diam, fringilla eu, placerat ut, viverra quis, diam. Vestibulum molestie.</p>
</div>


<div id="left">
<p class="leftinfo"><b>Title Here</b><br />Click on the pictures below for more information, massa erat ultrices lorem<a href="#nogo" title="#nogo">some page link</a>.</p>
<br />
<p><a href="furniture.html#blanket_chest" title="Blanket Chest"><img src="img/blanket_chest.jpg" width="160" height="110" alt="Blanket Chest" /><br />Cedar lined Blanket Chest built with cherry wood</a></p>
<br />
<p><a href="furniture.html#tea_table" title="Tea Table"><img src="img/tea_table.jpg" width="160" height="100" alt="Tea Table" /><br />Oval Tea Table with decorative wood inlay</a></p>
<br />
<p><a href="furniture.html#end_table" title="End Table"><img src="img/end_table.jpg" width="160" height="226" alt="End table with dove tail drawers" /><br />Family room table with tapered legs and beaded drawer fronts</a></p>
<br />
<p class="topg"><a href="#topg" title="Top of page" class="topglink">Top of page</a></p>
<br />
</div>

</div>


<div id="footer">

<div id="botnav">
<ul><li><a href="/" class="active">Home</a></li><li><a href="furniture.html" class="inactive">LINK2</a></li><li><a href="about.html" class="inactive">LINK3</a></li><li><a href="contact.html" class="inactive">LINK4</a></li></ul>
</div>

<p>Copyright © 2005 <a href="URL" title="TITLE" rel="external" class="extlink">CONTENT</a> All rights reserved.</p>
<div class="fade">Website development by <a href="http://mainewebworks.com" title="Common sense web development" rel="external" class="extlink">MaineWebworks</a></div>
</div>

</body>

body{
margin:0;
padding:0;
background:#FFF url(img/top.gif) repeat-x;
color:#575757;
font:100%/16px Arial,Helvetica,sans-serif;
}
h1{
margin:0;
padding:0;
color:#456dba;
background:transparent;
font:bold 1.5em Arial,Sans-Serif;
letter-spacing:-1px;
}
h2{
margin:0;
padding:3px 0 6px 0;
color:#a9531c;
background:inherit;
font:bold 90% Georgia,Times,'Times New Roman',Serif;
text-transform:uppercase;
}
p{
margin:0;
padding:2px 0 5px;
}
#wrap{
margin:0 auto;
padding:0;
width:765px;
}
#top{
margin:0;
padding:0;
width:100%;
height:120px;
}
#top h1{
margin:-55px 0 0 335px;
padding:0;
font-size:140%;
}
#logo{
margin:0;
padding:0;
width:271px;
background:transparent url(img/logo.jpg) no-repeat 0 7px;
color:inherit;
height:107px;
}
#navbar{
margin:0 0 0 24px;
padding:0;
background:#fff url(img/nav.gif) no-repeat;
color:inherit;
height:30px;
}
#nav{
display:inline;
}
#nav h2{
margin:0px 0 0 11px;
display:inline;
font-size:77%;
line-height:2.3em;
}
#nav h2 a{
color:#a9531c;
background:transparent;
}
#nav ul{
margin:0 0 0 80px;
padding:0;
list-style-type:none;
display:inline;
}
#footer ul{
margin:10px 0 0 0;
padding:10px 0 0 0;
list-style-type:none;
display:inline;
}
#nav li,#footer li{
list-style-type:none;
display:inline;
}
#nav li a,#nav li a:visited,#footer li a,#footer li a:visited{
margin:0px 20px 0 0;
color:#a9531c;
background:transparent;
font-weight:bold;
text-decoration:none;
}
#nav li a:active,#nav li a:active .active,#footer li a:active,#footer li a:active .active{
padding-bottom:0px;
border-bottom:3px solid #456dba;
color:#456dba;
background:#d1ddf2;
}
#main{
margin:0;
padding:14px;
width:490px;
float:right;
background:transparent;
color:inherit;
}
#main p,#main h1{
padding-left:15px;
padding-right:10px;
}
#left{
margin:0 0 10px 24px;
padding:0 15px;
width:192px;
float:left;
color:inherit;
background:#DADADA;
}
#left h2{
padding:0 0 2px 0;
color:#a9531c;
background:transparent;
font-size:85%;
text-align:center;
}
#left p{
padding:5px;
border:1px dotted #575757;
color:inherit;
background:#fff;
font-size:80%;
text-align:center;
}
#left img{
padding-bottom:3px;
color:inherit;
background:#fff;
}
#left p.leftinfo{
margin:0;
padding:0;
border:0;
color:#333;
background:#dadada;
font:95% "Courier New",Courier,monospace;
word-spacing:-3.5px;
letter-spacing:-.5px;
}
#left p.topg{
margin:0;
border:0;
color:#456dba;
background:#dadada;
}
#footer{
clear:both;/* needed for Mozilla */
margin:5px 0 0 0;
padding:0;
background:#fff url(img/footbck.gif) repeat-x;
color:inherit;
text-align:center;
height:80px;
}
#footer p{
margin:2px 0 5px 0;
padding:0;
font-size:75%;
text-align:center;
line-height:2.5em;
}
#botnav{
padding-top:8px;
}
.infobox{
margin-top:20px;
padding:5px 0 15px 0;
width:450px;
background:url(img/boxbot.gif) #f2f2f2 repeat-x bottom left;
color:#626262;
}