Special Offer - Get $90 Discount and Host Your Dream Web Site @ Dreamhost for 1 Year Click Here. Promo Code SLJ345
Back To Top
WordPress Web Application Development
Develop Powerfull Web Applications Using Cutting Edge WordPress Development Techniques

CSS Liquid Layout Tutorial For Designing Blog Post Page

on 2011/08/2 6:03 AM stored in: Uncategorized and tagged:

Introduction To Liquid CSS Layout Design

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.

Liquid Layout Demo and Download

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.

 

How To Make Liquid CSS Layout

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.

Basic Introduction To Required Styling Concepts

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

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

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

CSS Floating

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.

Creating Liquid Layout From Scratch

Outlining Layout Requirements For Blog Post Page

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
Creating Liquid Header

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.

    <head>
        <style type='text/css'>
            body{
                margin:0;
                padding: 0;
            }
            #main_container{
                width:100%;
                background-color:#444444;
            }
        </style>
    </head>
    <body>
        <div id='main_container'>
            
        </div>
    </body>
  • 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.
    <head>
        <style type='text/css'>
            body{
                margin:0;
                padding: 0;
            }
            #main_container{
                width:100%;
                background-color:#444444;
            }
            #header{
                width:96%;
                padding:2%;
                color:#fff;
                background-color:#000;
                font-size: 25px;
                font-weight: bold;
            }
        </style>
    </head>
    <body>
        <div id='main_container'>
            <div id='header'>INNOVATIVE PHP</div>
        </div>
    </body>
  • 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).
Creating Page Content and Sidebar

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.

    <head>
        <style type='text/css'>
            body{
                margin:0;
                padding: 0;
            }
            #main_container{
                width:100%;
                background-color:#444444;
            }
            #header{
                width:96%;
                padding:2%;
                color:#fff;
                background-color:#000;
                font-size: 25px;
                font-weight: bold;
            }
            #page_container{
                width: 96%;
                margin: 2%;
                float: left;
                background-color: #cfcfcf;
            }
            #page_content{
                width:70%;
                padding: 2%;
                float: left;
                min-height: 350px;
                background-color: #fff;
            }
            #sidebar_content{
                width:22%;
                padding: 2%;
                float: left;
                min-height: 350px;
            }
        </style>
    </head>
    <body>
        <div id='main_container'>
            <div id='header'>INNOVATIVE PHP</div>
             <div id='page_container'>
                <div id='page_content'>Sample Content</div>
                <div id='sidebar_content'>Sidebar Content</div>
            </div>
        </div>
    </body>
  • 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)
Creating Liquid Footer

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.

    <head>
        <style type='text/css'>
            body{
                margin:0;
                padding: 0;
            }
            #main_container{
                width:100%;
                background-color:#444444;
            }
            #header{
                width:96%;
                padding:2%;
                color:#fff;
                background-color:#000;
                font-size: 25px;
                font-weight: bold;
            }
            #page_container{
                width: 96%;
                margin: 2%;
                float: left;
                background-color: #cfcfcf;
            }
            #page_content{
                width:70%;
                padding: 2%;
                float: left;
                min-height: 350px;
                background-color: #fff;
            }
            #sidebar_content{
                width:22%;
                padding: 2%;
                float: left;
                min-height: 350px;
            }
            #footer{
                width:96%;
                padding:2%;
                color:#fff;
                background-color:#000;
                clear: both;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id='main_container'>
            <div id='header'>INNOVATIVE PHP</div>
             <div id='page_container'>
                <div id='page_content'>Sample Content</div>
                <div id='sidebar_content'>Sidebar Content</div>
            </div>
            <div id='footer'>Copyright © 2011 INNOVATIVE PHP. All rights reserved.</div>
        </div>
    </body>

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.

Advantages of Liquid CSS Layout

  • 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.

Disadvantages of Liquid CSS Layout

  • 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.

11 Responses to “CSS Liquid Layout Tutorial For Designing Blog Post Page”

  1. Deena Amorello Says:

    Neat post , dude . I really liked your conent — time to find out if you have a RSS feed!

  2. Jerica Brothern Says:

    Greetings! Very beneficial advice on this write-up! It’s the little adjustments that make the greatest modifications. Thanks a lot for sharing!

  3. Pamelia Ocarroll Says:

    You present many helpful ideas! Perhaps I should think of trying to do this myself.

  4. Esteban Menousek Says:

    Good evening, This was an excellent post, but I was questioning how do you suscribe for your RSS feed?

  5. admin Says:

    I have create the RSS feed links on sidebar and under every post.thanks

  6. seo katalogy Says:

    Howdy are choosing WordPress for the website platform? Iam a new comer to the blog world but. Iam trying to get began and set up my personal. I also found out about Drupal is fine. Might find my alternative…. Helpful publish, many thanks.

  7. admin Says:

    Thanks.I think wordpress is the best blogging platform. I am suggesting you to use wordpress in your blog.

  8. web design lincoln Says:

    thank you for the information. really nice.

  9. watch movies online streaming Says:

    Your blog has really inspired me to really change my way of writing. I have to tell you I appreciate all your hard work.

  10. fishing calc Says:

    Great post. I was checking constantly this blog and I am impressed! Extremely helpful information specially the last part I care for such information much. I was seeking this certain information for a long time. Thank you and good luck.

  11. admin Says:

    Thanks for your response.

Leave a Reply

Follow Us On Facebook