Holy Grail layout

CSS layout-‘Holy grail’ layout

Abstract
The theme of the presentation is CSS layout. This means it will be about building a HTML page layout with CSS and not tables or anything else.
The subject is the ‘Holy Grail’ layout so we will build a specific layout and not trying to cover several kinds of layouts.

‘Holy Grail’
I have chosen this layout because it seemed useful to know how to build a multiple column layout. And maybe you usually need a main section that is liquid (i.e. its width changes when the width of the page changes), a left sidebar (e.g. for navigation) that is fixed and a right sidebar that is also fixed (use your imagination to find this one a purpose).

So the first reason is that you need it to build your website/webapp.
The second reason is that it seemed, at least at first, that it was not too simple, not too difficult to make the subject of a CSS layout techniques presentation.
And simple was not. At least without two lucky accidents.

‘Holy Grail’ origins
The naming comes from this article http://alistapart.com/article/holygrail and it is due to the fact that is has been no elegant solution, at least to the time of that writing, to solving the layout. By elegant I wanted to summarize the principles the author described that we should follow in writing the CSS and that were not met in building previous known solution.

While it looked like the best practice approach to solving the layout (what was described in the article) it was still highly artificial i.e. employed tricks a.k.a. hacks. While I found that negative margins are perfectly valid in CSS and started to believe that it is not that bad to use them I could not get passed the negative margins specified in percentages.

What we will see next is an easier to understand solution to the ‘Holy Grail’.  While the technique in the alistapart article may be a must in order to support older browsers like IE before version 9 I think what we will see next is a good enough for modern browsers ie9 included.

Multi-column layout
As of the time of this writing, there is no CSS feature implemented in all major browsers (IE, Firefox, Chrome) that is designed for our task. The future looks promising with CSS3 flexible box layout module but the support in browsers is not very good http://caniuse.com/flexbox .

So if we need to support IE9 for example, the best solution I know is using floats.

And by the way, if you ever think of using tables you can find more than plenty of information on the web about why it is such a bad practice, for example here: http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html

The main reason for not using tables is that they are not intended for layout(i.e. presentation), but for structure (content) as any other HTML element. CSS on the other hand is meant especially to deal with the presentation. So using tables for layout mixes the content with the presentation making impossible to change one without affecting the other.

CSS float
Floats were not designed for building multi-column layouts. Instead they were introduced to enable websites to make a layout commonly found in magazines: a picture in a corner and text flowing to the right(or left) of it and going underneath. See what I mean here https://googledrive.com/host/0B0pX21g4KS9DVzh2aS1FTHZOMG8/float_origins.html

To float an HTML element we apply a CSS rule like this: float:left (right is also a valid value) meaning that it will be placed in the left corner of its container and the element following it will have its content flowing to the right and then go underneath

2 column layout
Let’s build our layout step by step.
We are going to start with 2 columns, a left sidebar and the main section.
The sections will be defined using the generic HTML element div.
The divs have a different background color applied in order to make their edges visible.
In order to have the two divs positioned side by side instead of stacked up one on top of the other we will apply the CSS rule float:left to the sidebar. We also set a fixed width to the sidebar.
You can see the result here: https://googledrive.com/host/0B0pX21g4KS9DWGZncG5tRnl4UUU/2column.html
Depending on the width of your browser you will see or not the behavior explained before for floats: the main section content flows to the right of the sidebar and the goes underneath. If you don’t see it, make the browser window narrower until the height of the main becomes bigger than the height of the sidebar.

While it is the desired behavior for what is was designed for, we don’t want the content to go underneath no matter the height of the columns. We can ‘fix’ the unwanted behavior by specifying a left margin for the main section that is the size of the sidebar.
Here is the 2 layout column solution: https://googledrive.com/host/0B0pX21g4KS9DX1ltaXltV1RqYTA/float2columns.html
That’s it! This is the technique that will get your sections to behave like columns. It is scalable so we can also add a third column in our way to the solution for the ‘Holy Grail’ layout.

3 column layout
In order to add the third column, the right-sidebar, we need to float to the left also the main section. Because there is an already left floated element in the leftmost corner (the left-sidebar), the main section will be pushed to the left until its left edge touches the right edge of the left-sidebar. So we will not need the margin fix for the main section. We will need it instead for the right-sidebar: we will set the margin-left of the right-sidebar to be the added width of the two floated sections.
https://googledrive.com/host/0B0pX21g4KS9DeS02YjFWTkNwOTQ/3columns.html
Or we can get rid of the margin fix altogether by floating also the right sidebar.

And finally the key of the solution - i.e. what makes our main section fluid - is to set the width to the main content by taking into account the sidebars dimensions by using calc CSS function like this:  calc(100% - <sum of the widths set for the sidebars>)

Modern ‘Holy Grail’
To complete our solution we only need to add a header and a footer.
To see these sections, take a look here:
https://googledrive.com/host/0B0pX21g4KS9DU3dMUVRGdEUtMkU/Modern_Holy_Grail.html
There is nothing special with the header, because it is added before any floating sections, but the footer is added after the floats so its content will flow along the floats (if you don’t see the effect, try narrowing the browser window until the main section gets taller than the right-sidebar).
So now the footer section behaves like another column but because it doesn’t have enough space to be placed to the right of the previous ones it goes underneath.

I don’t want anymore floats!
In order to tell the browser that we want to stop the floating behavior, we apply the rule clear:both (we can have the values left or right also). This is usually referred as the clearfix.
That’s it! No more floats ahead!
The result here:
https://googledrive.com/host/0B0pX21g4KS9DOW5iWEc5bUV3Vk0/Holy_Grail_clearfix.html

An even better Holy Grail
We can still improve our layout.
If you want equal height columns,i.e. when using different background color for columns, there are a couple alternatives here: http://css-tricks.com/fluid-width-equal-height-columns/
Unfortunately they employ tricks and are not as straightforward as the techniques that got us this far.

Another point I want to make is about adding some nice padding to the columns. If you try to add this you will see some unwanted results because we did not take it into account when doing width computations for the layout.

Padding the grail
The default algorithm for computing sizes (referred as the box sizing) does not take into account the padding of the boxes. This means you have to take them into account when making the calculation for the space left for the next box. So our percentages computed to sum up to 100% is wrong if we want to add some padding and stay with the default box sizing.
There are two solution for this: change the numbers so that when we add padding we change also the values for the other boxes or change the default box sizing.
I take it that you prefer the coolest of the two, so the next example will add padding and change the box sizing to keep the nice layout we had before.

Here is the grail with padding added to the sections:
https://googledrive.com/host/0B0pX21g4KS9DTU5YMGx6ekxlUjA/Padded_Grail.html
The secret is to add to the columns the CSS property box-sizing:border-box;
Although this CSS3 property’s specification is not stable yet https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing
it has good support in modern browsers. For Mozilla you have to use -moz- prefix .

The end
Long story short, this is the modern grail as I see it.
The only major flaw to it is that when constrained to have equal height columns you may have to use similar kind of tricks employed in the original grail from the alistapart.com article.