<?xml version="1.0" encoding="iso-8859-1"?>
<!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">
<head>
<title>Equal-Height CSS Columns - Keeping it tall - redmelon.net</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

/* Optional Code */
A:LINK {
	color : #CC0033;
}

A:VISITED {
	color : #666666;
}

BODY {
	color: #3300CC;
	background: #E0E0E0;
	background-image: url("thinline.gif");
	font : Comic Sans MS;
	font-family : Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: .8em;
}
H1 {
	font:Verdana;
    font-family:Verdana, sans-serif;
	font-size: 1.3em;
	padding: 0.5em;
	margin: 0;
}

H2 {
    font-family:Verdana, sans-serif;
	font-size: 1em;
	font-weight: bold;
	color: #cc0000;
	padding: 0.5em;
	margin: 0;
}

p  { padding: 0.5em; margin: 0; font-size: 1em; }
ul { padding-right: 1em; text-align: left; margin-bottom: 1em; }

 .header {
       height:96px;
       border-bottom:2px solid #3300CC;
 		background: #999999;
}

 .headergeek {
       height:90px;
	   position: absolute;
	   top: 14;
	   left: 35;
	   z-index: 4;
 }

.wrapper { min-width: 600px; }
          /* Allways good to have on full width liquid CSS layouts, 
             google "min-width IE" for JS solutions there */

.wrapper { border: 1px #CCCCCC; margin: 0 -1px; }
          /* this is a border with marginal compensation to stop scroll bars */

/* Setup (This all looks neater when it isn't put on display!) */

.wrapper {
	width: 100%;               /* total width */
}      

.outer {
	border-left-width: 150px;  /* left column width */
	border-left-color: #003399;   /* left column colour */
	border-right-width: 120px;  /* right column width */
	border-right-color: #999999;   /* right column colour */
	background-color: transparent; /* center column colour */
}

.left {
	width: 150px;              /* left column width */
	margin-left: -150px;       /* _negative_ left column width */
	margin-top: 10px;
	color: #cccccc;
}

.right {
	width: 120px;              /* right column width */
	margin-right: -120px;      /* _negative_ right column width */
}

.wide {
	background-color: #cccccc;    /* header and footer colours */
	padding: 5px;
}

 .buttons {
       margin:0px -10px 0px -10px;
       padding:3px 3px;
       text-transform:uppercase;
       font-family:Verdana, sans-serif;
       font-weight:bold;
       font-size:1em;
       white-space:nowrap;
	   width:150px;

 }

 .buttons a {
       padding:3px 3px;
       font-family:Arial, sans-serif;
       font-weight:bold;
       color:#FFFFFF;
       text-decoration:none;

 }

 .buttons a:visited {
       font-family:Arial, sans-serif;
       font-weight:bold;
       color:#FFFFFF;
       text-decoration:none;

 }

 .buttons a:hover {
       font-family:Arial, sans-serif;
       font-weight:bold;
       color:#FFCC00;
       text-decoration:none;

 }

 .buttons strong {
       padding:3px 3px;
       font-family:Arial, sans-serif;
       font-weight:bold;
       color:#FFFFFF;
       text-decoration:none;
 
 }

 .subbuttons {
       margin:0px -20px 0px -20px;
       padding:3px 10px;
       text-transform:uppercase;
       font-family:Verdana, sans-serif;
       font-weight:normal;
       font-size:1em;
       white-space:nowrap;
	   width:150px;

 }

 .subbuttons a {
       padding:3px 10px;
       font-family:Arial, sans-serif;
       font-weight:normal;
       color:#000099;
       text-decoration:none;

 }

 .subbuttons a:hover {
       font-family:Arial, sans-serif;
       font-weight:normal;
       color:#CC0000;
       text-decoration:none;

 }

  .subbuttons b {
       font-family:Arial, sans-serif;
       font-weight:bold;
       text-decoration:none;
 
 }
 
.footer a {
       color:#D2B48C;
}

.footer a:visited {
       color:#D2B48C;
}

/* Main code */

.outer { width: auto; border-left-style: solid; border-right-style: solid; }
.inner { margin: 0; width: 100%; }

.left { float: left; position: relative; z-index: 10; }
.right { float: left; position: relative; z-index: 11; }
.center { float: left; width: 100%; position: relative; z-index: 12; }

.wide { width: 100%; position: relative; z-index: 13; }

.clear { clear: both; }

/* Mozilla code */
.outer > .inner { border-bottom: 1px solid transparent; }
.left { margin-right: 1px; }
.right { margin-left: 1px; }
.center { margin: 0 -3px 0 -2px; }

</style>
</head>
<body>

<div style="height: 70px;"></div>
<div style="position: absolute; top: 0; left: 0; width: 100%;">

</div>


<div class="header"><h1>Mark #2</h1></div>

<div class="wrapper">

<div class="wide"><p>top</p></div> 

<div class="outer">
<div class="inner">

 <div class="left">
   <h2>Why this is cool:</h2>
   <ul>
     <li>Any total width, easy to modify</li>
     <li>All inline, so footers are possible</li>
     <li>Fixed width left and right columns, fluid center</li>
     <li>Full height columns</li>
   </ul>
 </div>
 <div class="center">
   <p>Hi, me again.</p>
   <p>This is a total redo of the columns code, using what I learnt doing the last one. IE and Opera were good, but Mozilla needed some convincing to show its borders... Tested in IE6/Win (Quirks and Standards), IE5/Win, Opera 6+7, Mozilla 1.0+1.3, Netscape 6.2/Win, and it even works sort of in NN4 (but not very well ;) ). It even has the &quot;That is better, well done in persisiting with it.&quot; for Mac users (Thanks Peter W this time) so that is a thumbs up for Safari and IE5/Mac. Have fun with this layout!</p>
   <p>The biggest change? <em>No more hacks!!!</em> (well.. OK, one, but that is only to hide code from IE which <em>wouldn't even be in there</em> if I didn't have to work around Mozilla bugs!)</p>
   <p>As always, error reports <a href="mailto:colsDouglas@redmelon.net">welcome</a>.</p>
   <p>Regards,<br />Douglas Livingstone</p>

   <p><!-- Creative Commons License --><a href="http://creativecommons.org/licenses/sa/1.0/"><img alt="Creative Commons License" border="0" src="http://creativecommons.org/images/public/somerights.gif" /></a><!-- /Creative Commons License --></p>

 </div>
 <div class="right"><p class="normal"><a href="noborder.htm"><strong>NoBorder Example</strong></a></p><p>text</p><p>text</p><p class="normal"><a href="http://redmelon.net">Visit me!</a></p></div>
 
 <div class="clear"></div> 
 
</div>
</div>

<div class="wide"><p>Extras: <a href="/tstme/">The index page</a></p></div> 

</div>

</body>
</html>