CSS three column layout fluidity

Question

I'm currently working on a CSS three column layout ( http://jsfiddle.net/methuselah/rCtGd/ ) and I wanted to ask several questions:

1) For some strange reason there seems to be a 10px gap between the header, content-1, content 2-1, content-2-2 . This cannot be seen in jsfiddle but if you load up the code in any browser it is noticeable. How do I get rid of it?

2) I would like to figure out a way of clearly defining a fluid column height. Is this possible? Ideally I would like all the divs header, content-1, content 2-1, content-2-2, footer to stretch in order to accommodate the page.

Thanks in advance.

Answer 1

Answers for your valid questions! :P

1. 10px gap is not found on the jsFiddle because, they use CSS Reset . The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.
2. For getting a good idea about CSS Fluid Layouts , please refer the links below:
   • The Perfect Fluid Width Layout
   • 2 And 3 Column Fluid CSS Layouts

Do you have any clarifications still? Let me know in the comments! :)