January 19, 2010 at 10:31

Column layout

    There are many ways to layout column layouts. Already more than one nose is broken during the holivars fired up about the use of certain methods. It would seem that everything should be very clear and understandable, but still a lot of difficulties arise. I want to contribute my contribution to the common good cause, and therefore I spent relatively little time on the experiments that led me to create another method in which there are the following pros and cons:

    pros
    • There is a foot clinging to the floor
    • Menu columns stretch at 100% height
    • There can be as many columns as you like
    • Columns can be both left-and right-handed, as well as combined, for example 2 on the right and 1 on the left
    • Width both rubber and fixed
    • Critical minimum hacks
    • Not using javascript
    • No background images are used to create a column effect.
    • No tables
    • The same result in ie5.5, ie6, ie7, ie8, ff3.5, o10, chrome4 ( If it doesn’t work in any browser, please unsubscribe in the comments. We will correct and bring it to a universal view )

    Minuses
    • There are several “extra” blocks. ( I myself would be glad to get rid of them )
    • There are several absolutely positioned blocks.

    I want to say right away that any constructive criticism is welcome. If you have ever seen something similar somewhere, let's proof. Since childhood, I loved to invent bicycles). Tips to improve the example are also welcome. We bring together to a high level. There will be time - I’ll do something like a layout generator, like the guys from csstemplater.com , whose tool I use from time to time and recommend it in every way. If the article seemed verbose to you - scroll down - there I posted several links to the examples made using this technique. So, let's get down to business ...

    Stage 1: Footer adhering to the bottom of the window


    In our work, a sticking footer is one of the most common topics. What is needed for him?
    • 100% html and body height
    • At least 3 blocks - one per container containing all the elements, the second - the footer itself
    • Well, the third one, necessary for the location of the page content in it

    The markup in this case will be similar to:
    2.   
    3.     Контент
    4.   
  •  
  •   Прижимающийся футер
  • * This source code was highlighted with Source Code Highlighter.
    And, accordingly, CSS for her:
    1. html, body {
    2.         min-height: 100% !important;
    3.         min-height: auto;
    4.         height: 100%;
    5.         border: none;
    6.       }
    7.       
    8.       body {
    9.         margin: 0;
    10.         padding: 0;
    11.       }
    12.       
    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 won’t dig deep, because I think that everything is extremely clear here. You can pay attention to the lower padding of the .container block and the minus upper margin of the .footer block . With a minus shift, we squeeze the footer so that it fits above the container. The padding at the content block affects the fact that the content does not crawl under the footer, but pushes it.
    We also stretch the body of the document so that it is at 100% height. Some properties - such as background specified optionally.

    Stage 2: Reflection on the next steps


    After this step, 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 then it’s time to make the speakers the same height. I have tried a lot of options. After going through all the conceivable and inconceivable options, I came to the conclusion that for the columns to stretch and occupy 100% of the document, it is logical to use the option when 2 blocks are involved 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 overlays on top of an absolutely positioned block.
    So we need to add an absolute box - in .wrapper and relatively positioned in our container.
    I will give an example from my layout:
    2.   
    3.   

    Also popular now: