Three column layout with fixed columns

Question

I am searching for a three column layout (Full screen) with header and footer (Not Liquid/Fluid design). i.e.

• when I re size my browser then my content should not be replaced.
• Also, no matter how any of the three column is longest footer will come in the bottom.
• Last, even if there is no content on the 3 columns to fill the page, footer will come in the bottom.

(Also need suggestion, which method is useful to keep my design constant in almost all major browser , is it %(table, tr,td), px or em ?)

In other words, Just like facebook.

Answer 1

IF you're looking for a 3 column design you'd best go with div elements and using a certain % for each column. If you'd use a fixed width in either px or em, you can end up in troubles (columns moving to below each other) upon resizing too much. However, if you use a percentage and resize, you'll get problems too below a certain resolution, but for larger resolutions % are usually more perfect. A downside of the percentage approach is that you can't always lay out the page like you'd want exactly, since the percentage makes the columns change in width depending on the screen viewed on.

Making sure the footer is below the columns can be achieved by using a clear css tag on either the last column, or on an br element after the column but before the footer for example.

Update:

An example of the 3 column layout with footer on bottom: http://puu.sh/9tga

Example with 3 column, header, footer: http://puu.sh/9tm6

Example with fixed header and footer: http://puu.sh/9toj

Answer 2

Sounds like you could use Twitter Bootstrap and use the 3 column layout (or choose among the other ones).