Zen layout demystified

I absolutely love the zen layout for its flexibility. What other layout can handle fixed-width sidebars for banners and a liquid content area? However, figuring out how it works can be challenging. Here's a minimal zen layout, coded along the explanation given here.

content

Here is its css…

#main {
  background-color: #98360D;
  color:white;
  text-align:center;
}

#navbar {
  background-color: #CB8F77;
  height: 3ex;
  float: left;
  margin-right:-100%;
  width:100%;
}

#content {
  background-color: #651313;
  margin-top: 3ex;
  float:left;
  width: 50%;
  height: 12ex;
  margin-right:-75%;
  margin-left: 25%;
}

#sidebar-left {
  background-color: #327232;
  margin-top: 3ex;
  float:left;
  width:25%;
  height: 6ex;
  margin-left:0;
  margin-right:-25%;
}

#sidebar-right {
  background-color: #3E980D;
  margin-top: 3ex;
  float:left;
  width:25%;
  height: 3ex; 
  margin-left: 75%;
}

#footer {
  clear:both;
  background-color: #B72222;
  width: 100%;
  height: 3ex;
}

…and HTML.


  
content
Tags: 
webdesign