Fluid, Three-Column Layout

In terms of adjustability, there are actually two basic types of web layouts. The first type is the fixed layout. Most blogsites have this type of layout. While the second type of layout is the fluid layout. In both types of layouts, there are corresponding advantages and disadvantages. The specific type of layout can be determined or identified by the behavior of the texts and elements of a particular web page. If you horizontally adjust the size of the web browser, the texts and page elements may or may not shift their respective positions. If the texts and elements do not change their respective positions, the layout of that particular page you are viewing is fixed. Conversely, if the texts and elements of the page shift positions to fit the size of the window browser, the particular page that you are viewing has a fluid layout.

First, we will change the standard two-column layout of your Blogger blogsite template. It is advisable that you first switch to minima template. This is the easiest Blogger template to edit.

NOTE: If you find it hard to directly edit the HTML template of your blog, you can use Notepad or Word to do the editing. Copy-paste the entire template onto a separate Notepad or Word document. Simply use the CTRL+F command to find the specific sections that are enumerated here. After you have done all the editing, you can again copy-paste the edited template codes onto the template editor box of your blogsite.

I. Change to Three-Column Layout:

Step1: Backup your template by copy-pasting the template codes onto Notepad and saving the file. Make sure that you checked the "expand widget" box.

Step2: Find these sections in your HTML template:

<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>

Change the above codes into these:

<div id='right-sidebar-wrapper'>
<b:section class='sidebar' id='right-sidebar' preferred='yes'>

Step3:In the style sheet portion of your blog template, change this element: "#sidebar-wrapper" into this: "#right-sidebar-wrapper"

Step4: Find this section: <div id='content-wrapper'>

Add these codes below it:

<div id='left-sidebar-wrapper'>
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>

Step5: Add these codes to your style sheet:

#left-sidebar-wrapper {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

Step 6. Change outer-wrapper and header-wrapper width. In your CSS-style sheet look for the #header-wrapper and #outer-wrapper definitions, and change the width definitions from 660 to 860.

Step7: Add a page element. Save the template and go to the Page Elements Tab. Now, you can finally add a page element to your left sidebar. Save the template and view your blog. The Page Elements Tab should look like the illustration shown below.

NOTE: Always save your template every time you make changes.

The layout that you have just created is a fixed layout. You can change this layout into fluid layout by adjusting the wrapper elements.

II. Change to Fluid Layout:

Step1: Locate these element wrappers or CSS definitions in your style sheet:

HEADER

#header-wrapper {
width:950px;
background:#000000;
margin:0 auto 10px;
border:4px outset $bordercolor;
}

OUTER

#outer-wrapper {
width: 950px;
margin:0 auto;
padding:15px;
text-align:left;
font: $bodyfont;
}

MAIN

#main-wrapper {
width: 450px;
border:4px outset $bordercolor;
background:#C9BE62;
padding:10px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

RIGHT SIDEBAR

#right-sidebar-wrapper {
text-align:center;
width: 200px;
background:#EAC117;
border:2px solid $bordercolor;
padding:0px 5px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

LEFT SIDEBAR

#left-sidebar-wrapper {
text-align:left;
width: 190px;
padding-left:50px;
float: right;
word-wrap: break-word;
overflow: hidden;
}

Step2: Change the width definitions from pixels (px) into percentage (%). An ideal percentage proportion would be: 100% for the header and outer wrappers; 60% for the main wrapper; and 20% for both the sidebar wrappers. You can experiment on this to see the best result that you prefer.