0

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.

Zerotoinfinity
  • 6,290
  • 32
  • 130
  • 206
  • I found similar question, but with fluid layout http://stackoverflow.com/questions/8283225/three-column-layout-fixed-width-center-with-fluid-side-columns – Zerotoinfinity Nov 27 '11 at 23:19
  • I don't know if [this](http://pmob.co.uk/temp/3colfixedtest_4.htm) is helpful, but it was the first result in Google when I searched '3 column layout with sticky footer'. – bookcasey Nov 27 '11 at 23:43
  • @bookcasey Thanks for the link but the middle container is liquid :-( – Zerotoinfinity Nov 27 '11 at 23:51
  • How can a layout be the full width of the browser, but not fluid in any of its parts? Mathematically, there is no way for a something that is 800px (or whatever) wide to fit—full width—in a 400px browser window, and also a 1400px window without changing. – bookcasey Nov 28 '11 at 00:07

2 Answers2

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

canihavesomecoffee
  • 163
  • 4
  • 19
  • So, Can I use instead of
    ?
     – Zerotoinfinity Nov 27 '11 at 23:33
  • You could use a table, and a table with only 3 cells a row would make it easier... However, (I'm a student informatics, so my teachers) people recommend to use div's because that is semantically better. Tables are for listing information, not to make a lay-out fit as it should. It was used in the past, but nowadays with css and div's you can achieve the same and even better. I'll update the answer in a couple of minutes with an example with div's. – canihavesomecoffee Nov 27 '11 at 23:37
  • Thanks for the perfect example.. I wish I could get an header and footer in that.. as I am very very weak in CSS and designing – Zerotoinfinity Nov 27 '11 at 23:55
  • 1
    There is already a footer in there, and a header could simply be added by adding a div before the
    , and setting the width to 100% with css. I'm going to alter the current sample a bit so you can see how that would look like.
     – canihavesomecoffee Nov 27 '11 at 23:59
1

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

Alexandre
  • 1,245
  • 1
  • 13
  • 22
  • Thanks for the link, this is damn informative and useful. Can I use the Javascript, CSS and HTML use in that for a commercial website ? – Zerotoinfinity Nov 27 '11 at 23:59