How to create a fluid width template ??

Yesterday i was wondering on how to create a fluid width template so i googled it at 7am before leaving to college .After searching for few minutes what i found is that it can be acheived by changing width from pixels to percentage ( % ) .I went to my college and tried it in one of the systems with HTML PAGE and achieved it very easily .After reaching home i tried it with blogger and you know what i did it in few steps

Now in this tutorial i will explain you on how to create fluid width template with one of templates provided by blogger.com ( minima )

Before going to tutorial what exactly is fluid width ??

The page shrink and expand according to the screen resolution as in the case of liquid which when stored in any container takes the container shape

•Login to your dashboard and create a new blog or click on a existing blog

•Select minima template

•Now go to Layout>EDIT HTML

•Now find and replace the following CSS codes

#outer-wrapper{

width : 660px;

with

#outer-wrapper{

width : 75%;

#header-wrapper{

width : 660px;

with

#header-wrapper{

width : 75%;

#main-wrapper{

width : 410px;

with

#main-wrapper{

width : 46%;

#sidebar-wrapper{

width : 220px;

with

#sidebar-wrapper{

width : 29%;

Check the demo @ http://elegant-bloggernutshell.blogspot.com/

Resize the browser window to see changes .[ i.e ] when you increase the size of the browser template expand ,when you decrease it shrinks

Always remember outer-wrapper= main-wrapper + sidebar-wrapper [i.e]i have changed the template from 2 column to 3 column

Hope you like the tutorial .

Minima Fluid Width Template

Download

Share on Facebook



Comments

  1. subha boss says:

    thank you kannan it's really helpful.

  2. Really amazing site in terms of design and I coudn’t find te above ” #outer-wrapper” in my blogger blog, ny idea y?

Speak Your Mind

*