Liquid page layout using CSS

Reference to: MaxDesign - Liquid Layouts

I've been almost the whole week to do this simple task, to locate three buttons in the home page using CSS. I was using HTML table to organize the page layout, but found out using CSS makes the page load faster, thus I decided to learn CSS for my project. After about a week of research, finally I've found this, and it really saves me! This tutorial is very simple, you can just follow step by step and you'll get your page layout done.

There are some definitions regarding liquid layout and fixed-width layout, then you'll know which one you should be using.

Copy these to your css file:

   1: /* COLUMNS */

   2: #leftColumn

   3: {

   4: float: left;

   5: width: 30%;

   6: margin-left: 4%;

   7: text-align:center;

   8: display:inline;

   9: border:dotted 1px #ccc;

  10: }

  11:  

  12: #middleColumn

  13: {

  14: float: left;

  15: width: 30%;

  16: margin-left: 1%; 

  17: text-align:center;

  18: border:dotted 1px #ccc;

  19: }

  20:  

  21: #rightColumn

  22: {

  23: float: left;

  24: width: 30%;

  25: margin-left: 1%;

  26: text-align:center;

  27: border:dotted 1px #ccc;

  28: }

  29:  

  30: #footer

  31: {

  32: clear: both;

  33: text-align:center;

  34: border:dotted 1px #ccc;

  35: margin-top:1em;

  36: }

  37:  

  38: #leftColumn p, #middleColumn p, #rightColumn p, #footer p

  39: {

  40: margin: 2em;

  41: }

 

Include these codes in your HTML file:

   1: <div id="leftColumn">

   2: <p><img src="Images/bluehouse01_large.gif" 

   3: alt="Single Company Analysis" />

   4: <br />

   5: Option 1

   6: </p>

   7: </div>

   8:  

   9: <div id="middleColumn">

  10: <p><img src="Images/bluehouse02_large.gif" 

  11: alt="Group Companies Analysis"/>

  12: <br />

  13: Option 2

  14: </p>

  15: </div>

  16:  

  17: <div id="rightColumn">

  18: <p><img src="Images/bluehouse03_large.gif" 

  19: alt="Form C Data Search"/>

  20: <br />

  21: Option 3

  22: </p>

  23: </div>

  24:  

  25: <div id="footer">

  26: <p>You have selected option 1, and this will allow you to perform analysis for abc company.

  27: </p>

  28: </div>

Then you'll get the output.