Web design layouts can be created according to various techniques. Most commonly used techniques is designing the page inside fixed container which is aligned center in the browser window. But now the liquid css layouts also known as flexible css layouts are becoming more popular in the web designing world. When you create a liquid layout the width and heights of html elements inside the page will change according to the size of the browser window. This allows us to create full width pages with out having to consider about the browser resolution.

---

Identifying whether given layout is liquid or fixed is very easy task. Change and reduce the browser window size and you will see a scrollbar coming up if the page fixed layout. On the other hand if the page uses liquid layout the size of elements will get smaller proportionally with the browser window size without showing a scroll bar. In this tutorial I’ll explain the process of creating a liquid css template.

Before you digg into this tutorial you might want to see a demo to find out exactly what we are going to talk about. Click the link below to watch the demo.

Demo

Download

Theory of creating a liquid css layout is very easy to understand. But actually creating one is not that easy since you have to have precise idea about the size of containers and content inside the containers. All you have to do is specify the size of your containers in percentages instead of pixels. In this process you have to calculate the size of containers considering margins and padding’s… Next section will show you how to create a basic liquid css layout for your blog post page.

You need to have a basic understanding about the following css concepts in order to create a liquid layout. If you have a very good knowledge of css, you can omit this section and proceed to next section.

Css padding defines the amount of space to the text content from the border of the container. For example 10px padding means that text will start after 10px from the container borders.

Css margin defines the a amount of space to the border of the current html element from it’s parent container.

Normally in if we define 2 divs in a div based layout, the 2nd div will display on the next line. If we want to get both divs to the same line we need to use the css float on the first div. Css float aligns elements left or right compared to another element.

I am going to show you how to create the basic structure of a blog post page like innovativephp which you currently viewing. Following list shows you the basic set of segments needed in this page.

 

• Liquid page header
• Liquid page content
• Liquid page sidebar
• Liquid page footer

First thing we need to do is creating a main container for your web page layout. All the components are placed inside the main container. Following html and css code creates a main container and it should be placed inside the body tag of your html document.

• I have defined the main container using a div tag since i am going to design a div based liquid layout.
• You can see that main container div is given 100% width since i want a full page layout.
• You can reduce the percentage according to your preference if you don’t want full width page.
• I am have defined the main container using a div tag since i am going to design a div based liquid layout.

    
        
    
    
        

            
INNOVATIVE PHP
        
    

• Now i have added the first component header to the main container.
• I need to have a little space before starting header text. So i have defined padding:2% .
• This means that header will have 2% space before text compared to main container.
• In this example i have set the padding of each side(top,right,bottom,left) as 2%. In a liquid layout only widths need to be given in percentages. So you can give pixel values for top and bottom padding if you prefer.
• Now we have used 2% padding for left and right. This means now we have only 96%(100-2*2) width left. So i have used whole 96% as the width of header container.
• Its important to know that this width will be equal to 96% width of the main container(parent container).

Now we can create the page content area and the sidebar. Page content should be aligned left and side bar should be on the right side. Since its better to have the height of sidebar and page content equal, we need to wrap both the elements in a parent container as shown in the code below.

    
        
    
    
        

            
INNOVATIVE PHP
             

                
Sample Content
                
Sidebar Content
            
        
    

• I have wrapped page content and sidebar inside the page_container div and defined a width of 96%.
• Look at the demo and you can see a different color bar around page content and sidebar. This is achieved by specifying 2% margin in the page_container
• Then i have defined the page_content and sidebar_content width as 70% and 22% respectively.
• Here is how i did the calculation. Sidebar width + page content width is 92% and the other 8% is specified as 2% padding in each side.
• Since divs always break into next line, i have defined float:left for both divs to get them aligned in same row.
• Calculate width of elements according to your own preferences considering padding.
• Important to thing to know here is that if you add a border of 1px or more to any of these containers the total width will exceed 100% and scroll will come up.
• So if you are defining borders,outlines..etc. Make sure to reduce the width of your containers.(Ex: make siderbar 21% and border=1px)

Now we are going to create the liquid footer. Its almost same as the header. Only difference is that i have aligned the text of the footer to center.

    
        
    
    
        

            
INNOVATIVE PHP
             

                
Sample Content
                
Sidebar Content
            
            
Copyright © 2011 INNOVATIVE PHP. All rights reserved.
        
    

Now we have created a simple liquid layout for your blog page. Using the knowledge given above now you can design your sidebar elements,blog posts,blog comments,rss feed section by specifying dimensions using percentages. Use the comment area for any questions or parts you don’t understand. I’ll build this post to make a complete web page layout in the future.

• You can use the full width of a web page to display more content.
• You can view the web site in high resolution screens with the same look and feel as in your laptop screen.

• You need lot of time and thinking to prepare a precise liquid layout.
• You need to consider about the images,videos,font-sizes before preparing liquid layout.
• All the concepts needed for creating liquid layouts may not work in older browsers.