Liquid Column Display Layout

I was busy with some of my projects. Few months back I was interested in liquid column layout structure. I had used this kind of layout in one of my project. This time I am going to discuss about the features of liquid column layout.

Earlier web page designing was highly dependent on HTML table structure. Common practice was to design a web page using HTML tags like table, tr, th, td, tbody etc. Web page designer used to design a layout in a graphic editor like Adobe Photoshop and slice the layout in small images in gif or jpeg format. Then create a table structure and insert those small images in different cells. This technique is very useful because putting those small rectangular images into different table cells, a web page can be designed having the same look and feel as layout image drawn in graphic editor. If not wrong till today this is the mostly used methodology to design web pages.

Let us review this designing procedure. I have described it in a very simplest way. Sometime designing a web page using the table structure based on graphical layout becomes a difficult job. If the graphical layout contains curves, color gradient then the complexity increases. I consider the most crucial part in this process is to design the table structure. Many times designer uses nested tables while designing the pages. Merging cells and rows are also widely used. Another important factor is how to put images in the table cells. Most of the cases img HTML tag is used, but sometimes inserting image as background works wonderfully.

So unless you don’t have a good knowledge of HTML table structure you won’t be able to work as professional web designer. In my early days in this profession I had to suffer with the complexity of nested table structure while designing pages.

In recent years I found there is a trend to avoid this procedure of designing web pages. There are certain reasons behind this change. First and foremost reason I think the size of the web page. Using nested table structure increases the file size of the web page, but many times it becomes unavoidable. I have also noticed a peculiar case of Internet Explorer while opening a page containing nested table. If the web page contains heavy images and huge text in nested tables, browser’s status will show “Done” while display of the page is not complete. IE shows “Done” status when display of the outermost table is complete. Another reason, editing the table structure in those web pages is quite difficult, that’s why people like to avoid this procedure. I found many times editing that kind of pages make the complex table structure incorrect. Support for other HTML tags having boxed or blocked like display such as div, layer, iframe etc by most of the browser is another important reason. Increasing use of CSS for applying style to provide a good look is also important. I found designer uses div tag supported with CSS instead of table to design web pages. They have produces pages which looks same as page designed using table structure and most importantly they have able to reduce the file size a bit.
Layouts like liquid column display, clean structure are the outcome of this increasing usage of div like tag instead of table tags in HTML. Though this new methodology is not very easy but I found there is a rapid increase in number who follows this.


Now here are the reasons why I was interested to implement liquid column display layout in one of my project.

  • If I need to design those web pages using table structure, I need to use one outermost table containing 3 columns. Now to display contents like (text, photographs), I need to use nested tables in those columns. I knew that I was going to suffer with that particular problem in IE. Also my file size will be higher.
  • There was another designing constrain that I can’t avoid using table structure. There was a background image that I had to display in the bottom portion of the page. Table structure wasn’t allowing me to do that.
  • The other reasons are basically the advantages of using liquid column display. I don’t like to discuss it here. You can always search to know about it. Let me discuss how do I designed the page layout.

Here is a sketch diagram about the structure that I was going to implement. It contains three columns which aligned in center and below footer. The page should display centered align three columns along with white spaces in the left and right side of the page. To design this structure I have used mainly div tags along with proper styles defined in CSS.

Here is a structural overview of the HTML code in the web page.

  1. <div class="container">
  2.    <div class="contentDiv">
  3.       <div class="contentDiv_left"><img class="LcolImgDiv" src="../images/c2.jpg" border="0" alt="" /></div>
  4.       <div class="contentDiv_mid">
  5.          <div class="hD1">Header Text</div>
  6.          <div class="hD2">Header text 2</div>
  7.          <p class="hD3">The text….</p>
  8.       </div>
  9.       <div class="contentDiv_right">
  10.       <ul>
  11.          <li><a class="item1" href="director/index.html">DIRECTOR SPEAKS </a> <img src="../images/bullet1.gif" alt="" vspace="0" /></li>
  12.          <li><a class="item1" href="students/index.html">STUDENTS </a> <img src="../images/bullet1.gif" alt="" vspace="2" /></li>
  13.          <li><a class="item1" href="alumni/index.html">ALUMNI </a> <img src="../images/bullet1.gif" alt="" vspace="2" /></li>
  14.       </ul>
  15.       </div>
  16.    </div>
  17.    <div class="footerDiv">
  18.       <div class="footerDivText">Copyright text</div>
  19.    </div>
  20. </div>

Here is styles defined in css

  1. .container {
  2. margin: 0px auto; width: 927px; padding:0px; border:0px;
  3. }
  4. .contentDiv {
  5. height: auto; width:925px; padding:2px 2px 2px 2px; margin-top:5px; background:#F9E6EC; border:0px;
  6. }
  7. .contentDiv_left {
  8. padding: 0px 0px 0px 0px; float: left; height: auto; width: 35%; background-image:url(../../images/column_bg.gif); background-repeat:repeat-y; border:0px;
  9. }
  10. .contentDiv_right {
  11. padding: 0px 0px 0px 0px; float: right; height: auto; width: 28%; background-image:url(../../images/right_column_bg.gif); background-repeat:repeat-y; border:0px;
  12. }
  13. .contentDiv_mid {
  14. padding: 0px 0px 0px 0px; float: left; height: auto; width: 35%; background:#FFC6E2; margin-left:10px; background-image:url(../../images/column_bg.gif); background-repeat:repeat-y; border:0px;
  15. }
  16. .footerDiv {
  17. height: 20px; width:925px; padding:0px 2px 2px 2px; margin-top:5px; margin-bottom:10px; background:#AD5B66; border:0px;
  18. }

Now here is outcome of the effort.

A brief explanation about the structure.
To design the 3 column structure I have used nested div tags with proper styles. There is a outermost div tag having class name contentDiv. Within that I have put 3 more divs with class names as contentDiv_left, contentDiv_mid and contentDiv_right. For these 3 divs I have defined float property in CSS and width in percentage value to achieve liquidity. For all those divs I have used height property as auto in CSS. This helps div to grow in lenght depending upon the content put in it.

Though I have implemented the 3 column liquid layout, there is a problem in it. If you look at the above picture you can spot out the problem. Yehh, the three columns are not of equal height. Depending upon the content added in those columns, their lengths will get adjusted. This is due to height:auto; in CSS for the 3 inner divs. One solution is to specify a big value as height in CSS. Pages will be unnecessarily long containing small content in those divs. Will create another problem.

I have used a technique to overcome this problem. I will be discussing it in my next post and this time next post I will do very soon. Till then comments, suggestions and queries are always welcome.

3 Comments

  1. Subhranshu says:

    Cool, and now you know why web is so addictive.
    By the way, I think the tagline should be “In search of reasons for web addiction”

  2. Susenjit says:

    Thank you for the genuine help for the tagline :)

  3. The length of the article seems to me not to be the problem. I tend more toward my speakers Alice, trying in your posts, etc. to incorporate more food for thought. It seems likely that the user can not afford to feel this prompted the “discussion” contribution.

Leave a Reply