Columns of the same height + border-bottom!

Begin

On Habré probably already a million articles about columns of the same height. You ask why we need another article in 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 padding, 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 a wrapper with overflow: hidden.

BUT! It is not possible to set the lower limit for the columns!

Decision

It's 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 simply specified a background image for the external wrapper, which shows the borders :). It really helped me in the current project. If there are more options without js I will be glad to know them. Well, I think it will become clearer if you look at an example: www.ejeliot.com/samples/equal-height-columns/example-6.html

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