TJKDesign.com | CSS Challenge

<!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">
<!-- Copyright 2005. All Rights Reserved - TJKDesign.com - Thierry Koblentz -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TJKDesign.com | CSS Challenge</title>

<style type="text/css">
<!--
/* Because of the "challenge", I cannot use an external Styles Sheet for these styles, so I am using the Caio's hack to make sure NN4 does not see them *//*/*/
body {background-color:#5A5A5A;color:#333;font-family:Arial,Helvetica,sans-serif;font-size:101%;margin:20px;padding:0;background-image:url(img/p7pbg.jpg)}
h1, h2, h3 {font-size:1.2em;margin:20px 0 0 0;font-weight:500;border-bottom:1px dotted #333}
li,li a {background-position:0 50%;background-repeat:no-repeat;list-style-type:none;line-height:1.6em;min-height:1.6em}
acronym {border-bottom:1px dotted #000;cursor:help}
img {border:0}
a:link,a:visited {color:#c30}
a:hover,a:focus {background-color:#ffc;text-decoration:none}
.more {padding-bottom:20px;border-top:1px solid #919191}
#footer a:hover,#footer a:focus {color:#000}
#skipto {margin:0 0 8px 0}
#skipto a {font-size:.7em;color:#ccc;text-decoration:none}
#skipto a:hover, #skipto a:active, #skipto a:focus {color:#fff;text-decoration:underline}
/* Do *not* go shorthand with the background image here or Opera 6 won't play nice *//*/*/
#wrapper {min-width:750px;width:100%;background-image:url(img/right.gif);background-position:right;background-repeat:repeat-y;background-color:#fff;border-top:1px solid #CCC;border-bottom:3px solid #333;border-right:1px solid #333;border-left:1px solid #CCC}
#masthead {height:50px;border-bottom: 1px solid #333;background:url(img/p7mastheadbg.jpg) #575757}
#masthead img {float:right;width:720px}
/* In the markup, if this DIV was right below #wrapper I would not have to declare any padding in there (only the background declaration), but with this particular order in the markup helps for the faux-columns in NN4. 
If you do not need to support NN4, remove the padding declaration here and the negative top-margin in #TJK. BTW, the padding here is to prevent a gap between the DIVs and the min-height is for IE 7 (hasLayout) *//*/*/
#inner_wrapper {padding-top:1px;background:url(img/left.gif) repeat-y;min-height:1px;}
#TJK {position:relative;display:inline;float:left;width:100%;padding:0;margin:-1px 0 0 -180px}
/* display:inline is used here because IE double the margins on floats *//*/*/
#leftcolumn {display:inline;float:left;width:160px;padding:0 0 20px 0;margin:0 0 0 180px;font-size:0.85em}
#leftcolumn ul {border-bottom:1px solid #9899B1;margin:0;padding:0;width:160px}
/* If you do not use MARGIN here Opera 6 will show a gap between the List Items *//*/*/
#leftcolumn li {list-style-type:none;margin:0}
#leftcolumn h3,#leftcolumn p {padding:0 9px;color:#ffc}
#leftcolumn ul a, #leftcolumn ul a:visited {background-color:#6C6D91;border-top:1px solid #9697B1;border-bottom:1px solid #4B4D65;color:#CCC;display:block;padding-left:8px;text-decoration:none}
#leftcolumn ul a:hover,
#leftcolumn ul a:active,
#leftcolumn ul a:focus  {background-color:#919191;border-top-color:#CCC;color:#333}
#leftcolumn p {margin-right:10px;text-align:justify;color:#ccc}
#middleCol {margin:0 0 0 340px;padding:0;font-size:0.9em;}
#middleCol ul {margin:15px;padding:0}
#middleCol li {background-image:url(img/bullet_w.gif);background-position:0 0.35em;padding:0 0 0 20px}
#middleCol p {line-height:1.5em;margin:0 12px}
#middleCol h1,#middleCol h2 {margin:16px 3px 10px 10px}
/* Do NOT declare a width for #rightcolumn (IE5 would accept only auto). Sizing this element is done through the negative margin (a bigger negative value widers the sidebar) *//*/*/
#rightcolumn {font-size:0.75em;padding:0 0 20px 100%;margin:0 0 0 -170px}
#rightcolumn ul {margin:12px 0 0 0;padding:0}
#rightcolumn li {background-image:url(img/bullet.gif);padding:0 0 0 20px}
#rightcolumn p {margin-right:20px;text-align:justify;color:#800040}
#footer p {color:#CCC;font-size:.7em;margin-top:7px}
#footer a {color:#ffc}
#rightcolumn .UAs li {background-position:right center;text-align:right;margin:0 10px 0 0;padding:0 23px 0 0;color:#800040}
/* I am using an image in this DIV instead of a "&nbsp;" for better results across browsers  *//*/*/
.clearer {clear:both;line-height:0;height:0}
.note {font-size:0.8em}
.js {display:none}
/* */
-->
</style>
<!-- These Conditional Comments are for IE Windows only. Here I take care of versions 5.x and 6 -->  
<!--[if IE]>
<style type="text/css">
/* I'm using height and line-height instead of padding to give "room" to the anchors in the List Items, for IE "width" is the same as "min-height" */
#leftcolumn ul a, #leftcolumn ul a:visited,li {height:1.6em}
/* Depending on the version, this fixes a left shift of 1px or 20px of the UL in the left column or the #TJK container. It also helps to prevent a bug that would play "peek-a-boo" with the heading in the right column */
#wrapper {zoom:100%}
</style>
<![endif]-->
<!--[if IE 5]>
<style type="text/css">
#leftcolumn li {float:left;clear:both;width:100%}
</style>
<![endif]-->
<!--[if lt IE 5.5000]>
<style type="text/css">
/* This is because the left column would jump 20px to the right when the min-width script kicks in */
#TJK {margin-left:expression(document.body.clientWidth < 750 ? "-179px" : "-159px" )}
</style>
<![endif]-->
<script language="JavaScript">
</script>

<script type="text/javascript" src="js/nn4styles.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
</head>
<body>
<p id="skipto"><a href="#maincontent">skip to main content</a></p>
<div id="wrapper">
<div id="masthead"><img src="img/p7logo.gif" alt="Simply Practical CSS" width="720" height="50" />
</div><!-- /masthead -->
<!-- If NN4 support is not needed this should follow #wrapper (#inner_wrapper first and then #masthead) - see comment in CSS rules -->
<div id="inner_wrapper">
<div id="TJK">
<div id="leftcolumn">

<ul>
<li><a title="CSS tutorials and articles" href="/articles/3cols.asp">Back to TJKDesign</a></li>
<li><a title="CSS tutorials and articles" href="/articles/3cols.asp">Back to TJKDesign</a></li>
<li><a title="CSS tutorials and articles" href="/articles/3cols.asp">Back to TJKDesign</a></li>
<li><a title="CSS tutorials and articles" href="/articles/3cols.asp">Back to TJKDesign</a></li>
<li><a title="CSS tutorials and articles" href="/articles/3cols.asp">Back to TJKDesign</a></li>
</ul>
  
</div><!-- /leftcolumn -->
<div id="middleCol">
<a name="maincontent" id="nav"></a>
<p class="note">All links open in the same window</p>

<h1>CSS Challenge</h1>
<p>On March 6 (2005), Al Sparber from <a title="Visit ProjectSeven.com" href="http://www.projectseven.com">ProjectSeven</a> posted a <acronym title="Cascading Styles Sheet">CSS</acronym> challenge on different lists and newsgroups. This challenge was about duplicating a <a title="Table Version" href="http://www.projectseven.com/tutorials/articles/2005/e1.htm">specific page</a> without using a table.</p>
<p>Other requirements follow:</p>
<ul>
<li>Valid <a href="http://validator.w3.org/check?verbose=1&amp;uri=http%3A//www.tjkdesign.com/articles/3cols/default.asp">XHTML 1 Strict</a> </li>

<li>Valid <a href="http://jigsaw.w3.org/css-validator/validator?profile=css2&amp;warning=2&amp;uri=http%3A//www.tjkdesign.com/articles/3cols/default.asp">CSS 2</a></li>
<li>Section 508 <a href="http://www.contentquality.com/mynewtester/cynthia.exe?rptmode=-1&amp;runcr=1&amp;url1=http%3A//www.tjkdesign.com/articles/3cols/default.asp">compliant</a></li>
<li>WAI <a href="http://www.contentquality.com/mynewtester/cynthia.exe?rptmode=2&amp;runcr=1&amp;url1=http%3A//www.tjkdesign.com/articles/3cols/default.asp">Level AAA</a></li>
<li>Three columns, fluid center column<span class="js"> [<a href="javascript:void(reSize(100))">increase</a> or <a href="javascript:void(reSize(-100))">decrease</a> width by 100px]</span></li>

<li>Column backgrounds extend to height of tallest column <span class="js">[make the <a title="Make the left column the tallest" href="?add=left">Left</a> | <a title="Make the right middle the tallest" href="?add=middle">Middle</a> | <a title="Make the right column the tallest" href="?add=right">Right</a> column the tallest]</span></li>
<li>Identical Masthead </li>
<li>Source code ordering same as this page [<a title="See this document without any styles applied" href="?styles=no">Linearize</a>]</li>

<li>Have a minimum layout width of 750 pixels and stand up to window resizing without breaking <span class="js">[Try a different width: <a href="javascript:void(reSize(600))">600px</a> | <a href="javascript:void(reSize(1000))">1000px</a>]</span></li>
<li>CSS embedded in document head [<a href="view-source:http://www.tjkdesign.com/articles/3cols/code.asp">view source</a>] </li>
<li>In the sidebar is the list of browsers that must be supported (this is a <a title="Wide browser support" href="?add=right">list of browsers</a> in which this layout has been successfully tested)
</li>

</ul>
<p class="more"><a href="/articles/3cols/3cols/">Read about the technique used here...</a></p>
<p class="more">Please use this <a title="Feedback Form" href="/contact/">contact form</a> to send feedback and report errors.</p>
</div><!-- /middleCol -->
<div class="clearer"><img src="img/clear.gif" alt="" /></div>
</div><!-- /TJK -->
<div id="rightcolumn">
<h3>Layout must work in:</h3>
<ul>
<li>FireFox</li>

<li>Opera 7.54</li>
<li>MSIE 6</li>
<li>MSIE 5 Windows</li>
<li>MSIE 5 Mac</li>
<li>Safari</li>
</ul>
<p><!-- Creative Commons License --><a href="http://creativecommons.org/licenses/by-nc-sa/2.0/"><img alt="Creative Commons License" src="http://creativecommons.org/images/public/somerights.gif" /></a><!-- /Creative Commons License --></p>
  
</div><!-- /rightcolumn -->
<div class="clearer"><img src="img/clear.gif" alt="" /></div><!-- See comment below -->
</div><!-- /inner_wrapper -->
</div><!-- /wrapper -->

<!-- I have this DIV here only because it helps to duplicate the design, but the best is to keep it inside the 2 wrappers so it replaces the structural hack above -->
<div id="footer">
<p>&copy;2005. All Rights Reserved - <a href="http://www.tjkdesign.com">TJKDESIGN.COM</a></p>
</div><!-- /footer -->
</body>
</html>