Equal height columns width issue - html

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;
}

Answer 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).