Column layout

There are many ways to layout column layouts. Already more than one nose is broken in the course of holivars, kindled about the use of certain methods. It would seem that everything should be extremely clear and understandable, but all the same many difficulties arise. I want to invest my contribution in the general good cause, and therefore I spent relatively little time on experiments, which led me to create another method in which there are the following advantages and disadvantages:

pros

• There is a footer clinging to the floor
• The menu columns are stretched to 100% height.
• Columns can be as much as you like
• Columns can be either left or right-sided or also combined, for example, 2 on the right and 1 on the left.
• Width, both rubber and fixed
• Critical minimum hacks
• Javascript not used
• Background images are not used to create a column effect.
• No tables
• Same result in ie5.5, ie6, ie7, ie8, ff3.5, o10, chrome4 ( If it doesn’t work for you in any browser, please write in the comments. Fix it and bring it to a universal view )

Minuses

• There are several "extra" blocks. ( I would be happy to get rid of them myself )
• There are several absolutely positioned blocks.

Just want to say that any constructive criticism is welcome. If you have ever seen something like this somewhere - let's proof. Since my childhood I loved inventing bicycles). Tips for improving the example are also welcome. Bring together to a high level. There will be time - I will do something like a typesetting generator, like the guys from csstemplater.com , whose tool I use from time to time and recommend it to everyone. If the article seemed to you verbose - scroll down - there I posted a few links to the examples made using this technique. So let's get down to business ...

Stage 1: Footer sticking to the bottom of the window

In our work, the sticky footer is one of the most common topics. What is necessary for him?

• 100% height html and body
• At least 3 blocks - one per container containing all elements, the second - directly the footer itself
• Well, the third, necessary for the location of the page content in it

The markup in this case will be similar to:

< div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .

1. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .
2. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .
3. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .
4. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .
5. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .
7. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .
8. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .
9. < div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .

< div class ="wrapper" > < div class ="container" > </ div > </ div > < div class ="footer" > </ div > * This source code was highlighted with Source Code Highlighter .

And, accordingly, CSS for it:

1. html, body {
2. min-height: 100%! important;
3. min-height: auto;
4. height: 100%;
5. border: none;
6. }
8. body {
9. margin: 0;
10. padding: 0;
11. }
13. .wrapper {
14. display: block;
15. position: relative;
16. min-height: 100%;
17. height: auto! important;
18. height: 100%;
19. width: 100%;
20. min-width: 800px;
21. background: yellow;
22. }
23. .container {
24. display: block;
25. height: 1%;
26. padding: 0 0 50px 0;
27. }
28. .footer {
29. margin: -50px 0 0 0;
30. height: 50px;
31. background: # BFF08E;
32. position: relative;
33. }

* This source code was highlighted with Source Code Highlighter .

I will not dig deep, because I think that everything is very clear. You can pay attention to the lower padding at the block .container and minus the upper margin at the block .footer . With a negative shift, we push the footer so that it fits over the container. Padding at the content block influences that the content does not climb under the footer, but moves it away.
We also stretch the body of the document so that it is 100% tall. Some properties - such as the background indicated optionally.
')

Stage 2: Reflections on the Next Steps

After this stage, I usually create a page header in the .wrapper block.

1. .header {
2. position: relative;
3. width: 100%;
4. height: 50px;
5. background: cyan;
6. }

* This source code was highlighted with Source Code Highlighter .

And here it is time to make the speakers the same height. I have tried a lot of options. After going through all imaginable and inconceivable options, I came to the conclusion that in order for the columns to stretch and occupy 100% of the document, it is logical to use the option when there are 2 blocks in creating the column. The first block is absolutely positioned, has a fixed width and height of 100%, and the second block is positioned relative to and superimposed over an absolutely positioned block.
So you need to add an absolute box - in .wrapper and relatively positioned in our container
I will give an example from my layout:

1. < div class = "wrapper" >
2. < div class = "column-l" >
3. </ div >
4. < div class = "column-r" >
5. </ div >
6. < div class = "column-m" >
7. </ div >
8. < div class = "header" >
9. Cap
10. </ div >
11. < div class = "container" >
12. < div class = "column-l" >
13. First column
14. </ div >
15. < div class = "column-r" >
16. Second column
17. </ div >
18. < div class = "content" >
19. Content
20. </ div >
21. < div class = "clear" >
22. </ div >
23. </ div >
24. </ div >
25. < div class = "footer" >
26. Cuddling footer
27. </ div >

* This source code was highlighted with Source Code Highlighter .

In order not to litter the article further - I will provide a link where you can download this file .
All questions that you have - with pleasure I will answer in the comments.

Conclusion: Examples in the studio!

I also cite a few examples of layouts collected by this system:

• Left menu layout. All columns with minimal content.
• Left menu layout. The first column stretches the document in height.
• Left menu layout. The second column stretches the document in height.
• Left menu layout. The content column stretches the document in height.
• Right menu layout. All columns with minimal content.
• Right menu layout. 3 columns on the right

In general, combinations can be as many as you like. Let me remind or tell those who do not know that the z-index works both for blocks positioned absolutely and for position: relative;

All these examples you can download in one archive ( 11 kb )

I hope I helped someone). Sorry for some confusion.
Thanks for attention.