.wilk

When I started my blog, I modified an existing template.  While this worked well to get started, I was not happy with the page layout.  Specifically, I did not like the fixed width layout.  My current display settings are 1680 X 1050, and the stock 700px layout left a ton of white space.  However, I want people with an 800 X 600 display to enjoy reading my blog - content not withstanding.  The answer was a liquid layout.

The blocks of a liquid layout expand and collapse as the browser window is resized.  After reviewing some site templates, I was inspired by the templates of www.blogenginetheme.com and more specifically LiquidNautica.  However, this template resizes from the center, and I wanted a multi-column layout that resized from the sides.

At a high-level, my site design has 3 major sections from top to bottom: header, navbar, and body.  Nothing unusual. The header is a 2 column layout with a fixed column and a fluid column.  The navbar is a single fluid column, and the body is a 2 column layout with a fluid column and a fixed column. 

The navbar is easy.  Set the width as a percent, and the viewport will resize with the browser window.  The body takes a little more work, because of the mix of fixed and fluid columns.  The solution to this problem is negative margins.  Smashing Magazine provides a good discussion of negative margins if you want to know more.  For the body, I created the fluid (left) div first and then the fixed div to place over the right side of the page.

<div id="wrapper-primarycontent">

  <div id="primarycontent">

    Content and postings go here... (this is the fluid column)

  </div>

</div>

<div id="secondarycontent">

  <div class="content">       

    Login, tags, and blogroll goes here... (this is the fixed column)

  </div>

</div> 

For the stylesheet:

#wrapper-primarycontent 

{ 

    float: left; 

    width: 100%; 

} 

#primarycontent 

{ 

   margin-right: 180px; 

}

#secondarycontent 

{ 

   width: 180px; 

   float: left; 

   margin-left:-180px; 

} 

#secondarycontent .content 

{ 

   padding: 0px 10px 0px 0px; 

   margin-bottom: 20px; 

} 

This sets the width of the primary content wrapper (fluid column) to 100%, and the contained primarycontent div is given a fixed margin on the right.  The width of this margin should equal the width of the fixed column.  The secondarycontent div (fixed column) is given a width of 180px, and the left margin is set to -180px, again matching the width of the fixed column.  This basically slides the fixed column into and over the fixed right margin of the fluid column.

The header uses a similar principle, but it is less obvious.  For the header, we again created the fluid column first, and then the fixed column to place into the fixed margin.

<div id="wrapper-header"> 

  <div id="header-rightzone"> 

    <div id="header-right-banner"> 

      <div id="header-description"> 

        <h2>Blog Description (fluid column)</h2> 

      </div> 

    </div> 

  </div> 

  <div id="header-leftzone"> 

    <div id="header-name"> 

      <h1>Blog Name (fixed column)</h1> 

    </div> 

  </div> 

</div> 

And the key CSS elements are:

#header-rightzone 

{ 

    float:left; 

    width: 100%; 

} 

#header-right-banner 

{ 

    background: transparent url('images/worldmap.jpg') no-repeat top left; 

    margin-left:160px; 

} 

#header-leftzone 

{ 

    float:left; 

    background: transparent url('images/b8.gif') no-repeat top left; 

    width: 160px; 

    margin-left: -100%; 

} 

Like the body, the fluid column container, header-rightzone, is given a width of 100%.  However, this time the margin of the contained header-right-banner is placed on the left for the fixed column.  The fixed column is given a width of 160px, again matching the left margin of the fluid column.  And again, negative margin for the fixed column is used to slide the fixed column into and over the fixed margin of the fluid column.  But how much negative margin?  As the browser window resizes, the required amount of negative margin changes.  In this case, we use margin-left: -100%; whatever the fluid zone width (100%), we want to move the fixed column all the way to the left side of the column.

In the next part, we will be adding reviewing Absolute Image Placement and CSS DropShadows.