Introduction To Liquid CSS Layout Design
How To Make Liquid CSS Layout
Basic Introduction To Required Styling Concepts
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
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.
Related Posts :
