The perfect layout for a three column blog

I have always wanted the perfect three column design for my blog. I stumbled across this web site and I think this is the probably as good as it gets.

Holy Grail 3 column liquid-layout: No Quirks Mode, No IE Conditional Comments

This is by Matthew James Taylor and I have to say I am very impressed.

I renamed the CSS id’s to something easier for me to remember. I added a navigation bar, and another div to give a white space on the right and left.

Here is the basic html:

<!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-GB">
<head>
  <title>Site Title</title>
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

  <style type="text/css">
  body {
      margin:0;
      padding:0;
  }

  #ContainerMain {}

  a {
      /* color:#369; */
      text-decoration:none;
  }

  a:hover {
      text-decoration: underline;
  }

  h1, h2, h3 {
      margin:.8em 0 .2em 0;
      padding:0;
  }

  p {
      margin:.4em 0 .8em 0;
      padding:0;
  }

  img {
      margin:10px 0 5px;
  }

  #Header {
      float:left;
      width:100%;
      padding:0;
      margin:0;
      border-bottom:1px solid #000;
      background: #CCC;
      color: #FFF;
  }

  #Header p {
      padding:.5em 15px    .2em 15px;
      margin:0;
  }

  #Header h1  {
      padding:.2em 15px;
      margin:0;
  }

  #Header h2  {
      padding:.2em 15px    .7em 15px;
      margin:0;
  }

  #NavBar {
      float:left;
      width:100%;
      padding:0;
      margin:0;
      border-bottom:1px solid #000;
      background: #EEE;
      color: #FFF;

  }

  #ContainerColumns {
      margin-left: 20px;
      margin-right: 20px;
  }

  #ContainerLeft {
      position:relative;  /* This fixes the IE7 overflow hidden bug and stops the layout jumping out of place */
      clear:both;
      float:left;
      width:100%;         /* width of whole page */
      overflow:hidden;    /* This chops off any overhanging divs */
      background:#ffd8b7; /* Left column background colour */
  }

  #ContainerMiddle {
      float:left;
      width:200%;
      position:relative;
      left:200px;
      background:#EEE;    /* Centre column background colour */
  }

  #ContainerRight {
      float:left;
      width:100%;
      position:relative;
      left:50%;
      margin-left:-400px;
      background:#ff9;    /* Right column background colour */
  }

  #ColumnMiddlewrap {
      float:right;
      width:50%;
      position:relative;
      right:100%;
  }

  #ColumnMiddlepad {
      margin:0 15px 0 415px;
      overflow:hidden;
  }

  #ColumnMiddle {
      width:100%;
      overflow:hidden;
  }

  #ColumnLeft {
      float:left;
      width:170px;
      position:relative;
      margin-left:-50%;
      left:215px;
      overflow:hidden;
  }

  #ColumnRight {
      float:left;
      width:170px;
      position:relative;
      left:15px;
      overflow:hidden;
  }

  #footer {
      text-align: center;
      clear:both;
      float:left;
      width:100%;
      padding:0;
      margin:0;
      border-top:1px solid #000;
      background: #CCC;
  }

  #footer p {
      margin: 0px;
      padding: 0px;
      font-size: 12px;
  }
  </style>
</head>
<body>
  <div id="ContainerMain">
    <div id="Header">
      <h1>Site Name</h1>
      <h2>Site Tag Line</h2>
    </div>
    <div id="NavBar">Home</div>
    <div id="ContainerColumns">
      <div id="ContainerLeft">
	<div id="ContainerMiddle">
	  <div id="ContainerRight">
	    <div id="ColumnMiddlewrap">
	      <div id="ColumnMiddlepad">
		<div id="ColumnMiddle">
		  <!-- Column 1 start -->
		  <p>Middle Column</p>
		  <p><a href="www.rhyous.com">http://www.Rhyous.com</a></p>
		  <h1>Heading 1</h1>
		  <h2>Heading 2</h2>
		  <h3>Heading 3</h3>
		  <!-- Column 1 end -->
		</div>
	      </div>
	    </div>
	    <div id="ColumnLeft">
	      <!-- Column 2 start -->
	      <p>Left Column</p>
	      <!-- Column 2 end -->
	    </div>
	    <div id="ColumnRight">
	      <!-- Column 3 start -->
	      <p>Right Column</p>
	      <!-- Column 3 end -->
	    </div>
	  </div>
	</div>
      </div>
    </div>
    <div id="footer">
      <p>Footer</p>
      <p>This is where you put your footer stuff.</p>
      <p>
	<a href="http://validator.w3.org/check?uri=referer">
	  <img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" />
	</a>
      </p>
    </div>
  </div>
</body>
</html>

One Comment

Leave a Reply

How to post code in comments?