Columns of the same height + border-bottom!

    Begin



    On a habr probably already a million articles about columns of the same height. You may ask why do we need another article for the 1001st time?

    That's the plug



    The problem is that columns of the same height with a lower border are not so easy to do ... Basically, I use the method with paddings, i.e. set:

    .column {
      padding-bottom: 32750px;
      margin-bottom: -32750px;
    }

    * This source code was highlighted with Source Code Highlighter.


    for columns that should be the same height,
    and put these columns in wrapper with overflow: hidden.

    BUT! However, you cannot set a lower border for the columns!

    Decision



    Everything is very simple, you need to wrap the wrapper again and specify the external

    #container {
      background:transparent url(images/example-6.gif) no-repeat scroll center bottom;
      float:left;
      padding-bottom:1px;
    }

    * This source code was highlighted with Source Code Highlighter.


    We just specified a background image for the external wrapper, which shows the borders :). The current project helped me a lot. If there are more options without js, I will be glad to know them. Well, I think it will become clearer to you if you look at an example: www.ejeliot.com/samples/equal-height-columns/example-6.html

    Material found here: www.ejeliot.com/blog/61

    Also popular now: