html - Make all floating DIVS same height -

issue

i have 4 columns in footer , have set border-right on last column:

they @ variable height and, content variable, cannot determine absolute height values column.

how can ensure columns same height borders between them equal in length?

code

body,  html {    font-family: 'open sans', helvetica, arial, sans-serif;    line-height: 1.62em;    font-weight: lighter;    padding-top: 15px;  }  {    color: inherit;    text-decoration: inherit;  }  div#footer {    background: #333;    text-shadow: none;    color: white;    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5) inset;    color: #ccc;    padding: 20px 0;    text-shadow: 0 1px 1px #111;    width: 100%;  }  div.wrapper {    width: 100%;    max-width: 1080px;    margin: auto;  }  div#footer div.wrapper div.column {    width: 25%;    box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;    padding: 0 10px;    border-right: 1px solid rgba(255, 255, 255, 0.3);    float: left;  }  div#footer div.wrapper div.column h4 {    font-weight: normal;    font-size: 16px;    text-align: left;    color: white;    /*border-bottom: 1px dashed #555;*/    line-height: 2em;    border-bottom: 1px solid rgba(255, 255, 255, 0.1);  }  div#footer div.wrapper div.column ul {    margin-bottom: 1.62em;  }  div#footer div.wrapper div.column ul li,  div#footer div.wrapper div.column p {    padding: 0;  }  div#footer ul.footerlist li:before {    font-family: 'fontawesome';    content: '\f0da';    margin: 0 5px 0 0px;  }  div#footer ul.footerlist li {    padding-left: 15px;  }  div#footer ul.footerlist li span {    font-weight: inherit;  }  div#footer .right {    text-align: right;  }  div#footer p.meta {    font-size: 10px;    color: #777;    line-height: 1.62em;    text-align: right;  }  div#footer form {    width: 100%;    margin: 0;    padding: 0;    margin-bottom: 1.62em;  }  div#footer input {    padding: 8px 12px;    font-family: inherit;    border: none;    margin: 0;    font-size: 14px;    box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;  }  div#footer label {    display: block;  }  div#footer input[type="text"],  div#footer input[type="email"] {    width: 80%;  }  div#footer input[type="submit"] {    width: 20%;    background: #fd5001;    color: white;    cursor: pointer;  }  div#footer form input[type="email"] {    border-radius: 2px 0 0 2px;  }  div#footer form input:last-child {    border-radius: 0 2px 2px 0;  }  div#footer input[type="submit"]:hover {    background: #fd7902;  }  div#footer input[type="submit"]:active {    background: #b03700;  }  div#footer input:focus {    border-color: black;  }

<footer>    <div id="footer">      <div class="wrapper">        <div class="column">          <ul class='footerlist'>            <li>              <a href='./article/11/5-things-to-consider-when-you-get-a-counter-offer'>5 things consider when counter offer</a>            </li>            <li>              <a href='./article/8/quitting-your-job-without-the-guilt'>quitting job without guilt</a>            </li>            <li>              <a href='./article/7/are-you-asking-the-right-questions-when-on-interview'>are asking right questions when on interview?</a>            </li>            <li>              <a href='./article/5/ever-thought-of-recruitment'>ever thought of recruitment?</a>            </li>            <li>              <a href='./article/4/what-s-your-new-year-s-resolution'>what's new year's resolution?</a>            </li>          </ul>        </div>        <div class="column">          <ul class='footerlist'>            <li>              <a href='./job/15/audit-and-accounts-senior'>london: audit , accounts senior</a>            </li>            <li>              <a href='./job/14/advanced-senior-bookkeeper'>london: advanced senior bookkeeper</a>            </li>            <li>              <a href='./job/11/new-business-specialist-manager'>auckland: new business specialist manager</a>            </li>            <li>              <a href='./job/10/coo-leading-global-assistance'>auckland: coo leading global assistance</a>            </li>            <li>              <a href='./job/9/claims-team-manager'>auckland: claims team manager</a>            </li>          </ul>        </div>        <div class="column">          <h4>social</h4>          <ul>            <li>              <a href="#" target="_blank">                <i class="fa fa-twitter fa-fw"></i>twitter              </a>            </li>            <li>              <a href="#" target="_blank">                <i class="fa fa-linkedin fa-fw"></i>linkedin              </a>            </li>          </ul>          <h4>important links</h4>          <ul>            <li>              <a href="/">homepage</a>            </li>            <li>              <a href="/privacy">privacy policy</a>            </li>            <li>              <a href="/terms">terms of use</a>            </li>            <li>              <a href="/contact">contact us</a>            </li>          </ul>        </div>        <div class="column" style="border-right: none;">          <h4>jobseeker pack</h4>          <form id="footerform">            <label for="footerinput">get free jobseekers' information pack:</label>            <input type="email" name="email" placeholder="email address" id="footerinput">            <input type="submit" value="go" name="footersubmit">          </form>          <p>part of redacted</p>          <img src="img/redacted.png">          <p class="meta">website designed , developed redacted. copyright&copy; redacted 2015. rights reserved.</p>        </div>        <div style="clear:both;"></div>      </div>    </div>  </footer>

set wrapper display: table , set columns display: table-cell (and remove float)

so this:

.wrapper {     display: table;     ... } .wrapper .column {     display: table-cell;     ... }