Equal height columns width issue

Question

I have 3 columns that extend to equal height. The only problem now is that if I have 2 columns only they expand their width and take 100% of the main container. So basically I need them to have the same width wether it's 1, 2 or 3 columns. Any idea on how to achieve this? Many thanks!

Fiddle Demo

.content > img {
    vertical-align:top;
}
#wrapper {
    height: 100%;
    width: 100%;
    margin: 20px auto;
    display:table;
    overflow: hidden;
    border-spacing: 30px;
}
#wrapper > .col {
    display: table-cell;
    width: 30.3%;
    margin: 0 15px 3px;
    background-color: #fff;
    text-align: center;
    position: relative;
    height: 100%;
    padding-bottom: 2px;
    border:1px solid #000;
}
#wrapper > .col > .content {
    padding:0 0 35px;
    height:100%;
}
.content {
    margin-bottom:30px;
    position: relative;
}
.content > p {
    vertical-align:top;
}
.content h3 {
    font-size:1.375rem;
    font-weight:400;
    text-align:center;
    margin-bottom: 20px;
    padding: 25px 27px 0;
}
.content p {
    text-align:left;
    padding: 0 27px 30px;
}
.button.moreinfo {
    margin-top: 5px;
    margin-bottom: 0;
    padding-top: 0.5rem;
    padding-right: 0.3rem;
    padding-bottom: 0.5rem;
    padding-left: 0.3rem;
    background-color: #2a2a2a;
    font-size: 0.9rem;
    color: #f39c12;
    font-weight: 400 !important;
}
div.btn-align-bottom {
    position:absolute;
    bottom:50px;
    left:0;
    right:0;
}
.info-box {
    margin-bottom:0;
    margin-top: 15px;
}
.info-box img {
    max-width: 100%;
    max-height: 100%;
    vertical-align: middle;
}
.info-box-inner {
    background: #FFF;
    padding:25px 27px 35px;
    display:inline-block;
    overflow:hidden;
    float:none;
    min-height:270px;
    text-align:center;
    -moz-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    -webkit-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
    z-index:1;
}
.info-box-inner p {
    text-align:left;
}
.info-box-inner h3 {
    font-size:1.375rem;
    font-weight:400;
    text-align:center;
}

So you want to set a fixed width on the columns in pixesl? Is that right? — Paulie_D, Apr 09 '14 at 15:44
So just add a max-width in pixels...does that not work? However, I'm not seeing the point of using display:table in that case. — Paulie_D, Apr 09 '14 at 15:59
I would remove all of the `display:table;` and `display:table-cell;` bits and use floats instead. — Manly, Apr 09 '14 at 16:10
On the contrary ``display:table`` and ``display:table-cell`` are very handy, if you want equal height for all boxes... — Stephan Kulla, Apr 09 '14 at 16:21

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

Okay, finally here is my working jsFiddle demo. See http://jsfiddle.net/rfjg4/10/show/ for the result.

I added the class col2 to the second wrapper and the CSS:

.wrapper.col2:after {
    content: "";
    display: table-cell;
    width: 30.3%;
    margin: 0 15px 3px;
    background-color: #fff;
    text-align: center;
    height: 100%;
    padding-bottom: 2px;
}

With the above code a new cell with empty content is added to the <div class="wrapper col2"> tag.

Alternatively you can avoid the col2 by using CSS 3 selectors:

wrapper:first-child:nth-last-child(3) ~ div::after {
    content: "";
    display: table-cell;
    width: 30.3%;
    margin: 0 15px 3px;
    background-color: #fff;
    text-align: center;
    height: 100%;
    padding-bottom: 2px;
}

See this jsFiddle or http://jsfiddle.net/rfjg4/11/show/ for an example. (See this Stackoverflow question Can CSS detect the number of children an element has? for explanation of the selectors).

Some notes:

In your jsFiddle example you used two times id="wrapper" for a <div>. You have to change the id to a class (and update your CSS)
There is one </div> extra in line 17 (and in other lines, too). Those tags are marked red in jsFiddle.
You do not need position:relative; in your CSS (I deleted it in the example).

edited May 23 '17 at 11:57

Community

1
1

answered Apr 09 '14 at 15:55

Stephan Kulla

4,739
3
26
35

This fiddle behaves identically as the one OP provided. Maybe I'm mistaken, but I believe he is having an issue trying to get the two bottom cols to remain at the same width as the top three, even though there are only two of them. To me, it looks like an issue with the `display: table-cell;` bit of the CSS. – Manly Apr 09 '14 at 16:00
You can see just a difference after you make the iframe for the jsFiddle bigger than certain amount (have a look [here](http://fiddle.jshell.net/rfjg4/2/show/) on a big screen) – Stephan Kulla Apr 09 '14 at 16:06
I made it larger, when I originally viewed it. Your fiddle still behaves in the same manner as his, which is what I originally said. In your fiddle, the bottom two columns still expand to a total width of 100%, which is the situation the OP is trying to avoid. – Manly Apr 09 '14 at 16:08
@JohnManly: You are right! Thanks for clarification, I guess now I understand the problem... ;-) – Stephan Kulla Apr 09 '14 at 16:10
That's exactly the problem. Thanks John Manly for the clarification – Nesta Apr 09 '14 at 16:15
We're almost there. I've found out that for some reason when you add a 3rd column to the second row all the bottom columns qet too narrow – Nesta Apr 09 '14 at 16:30
Then you have to remove ``class="col2"`` from the second wrapper and everything is fine... – Stephan Kulla Apr 09 '14 at 16:53
(Reason: with ``class="col2"`` a new cell is added to the wrapper at the end of the ``
``)
– Stephan Kulla Apr 09 '14 at 16:54
Oh I see. But isn't there a way to avoid that? I mean if the user adds an extra column then he will have to remove that extra class to the wrapper. Not really what I'm looking for – Nesta Apr 09 '14 at 16:57
See my update of the question (just works with the new CSS3 selectors). See http://caniuse.com/ for the browser support. Alternatively you can also use jQuery (requires obviously JavaScript). – Stephan Kulla Apr 09 '14 at 17:25

Equal height columns width issue

1 Answers1

Linked