Ben
Reputation: 9001
Make all floating DIVS same height
Issue
I have four columns in my footer and I have set border-right on all but the last column:
They are all at variable height and, as the content is also variable, I cannot determine absolute height values for any column.
How can I ensure all the columns are the same height so the borders between them are equal in length?
Code
body,
html {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
line-height: 1.62em;
font-weight: lighter;
padding-top: 15px;
}
a {
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 To Consider When You Get A Counter Offer</a>
</li>
<li>
<a href='./article/8/quitting-your-job-without-the-guilt'>Quitting your job without the guilt</a>
</li>
<li>
<a href='./article/7/are-you-asking-the-right-questions-when-on-interview'>Are you asking the 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 your 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 and 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 your 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 and developed by REDACTED. Copyright© REDACTED 2015. All rights reserved.</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
</footer>Upvotes: 1
Views: 497
Answers (4)
Roy Sonasish
Reputation: 4609
you can use jquery to archive this.
$(document).ready(function(){
$('.wrapper').each(function(){
var highestBox = 0;
$('.column', this).each(function(){
if($(this).height() > highestBox)
highestBox = $(this).height();
});
$('.column',this).height(highestBox);
});
});body, html {
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
line-height:1.62em;
font-weight:lighter;
padding-top:15px;
}
a {
color:inherit;
text-decoration:inherit;
}
p { font-weight: lighter; }
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;
font-size: 12px;
text-shadow: 0 1px 1px #111;
width:100%;
}
div.wrapper {
width:100%;
max-width:1080px;
margin: auto;
}
div#footer div.wrapper div.column {
/*width: calc(100%/3);*/
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; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<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 To Consider When You Get A Counter Offer</a>
</li>
<li>
<a href='./article/8/quitting-your-job-without-the-guilt'>Quitting your job without the guilt</a>
</li>
<li>
<a href='./article/7/are-you-asking-the-right-questions-when-on-interview'>Are you asking the 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 your 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 and 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 your 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 and developed by REDACTED. Copyright© REDACTED 2015. All rights reserved.</p>
</div>
<div style="clear:both;"></div>
</div>
</div>
</footer>Upvotes: 0
Iamzozo
Reputation: 2358
Set the wrapper to display: table and set the columns to display: table-cell (and remove the float)
So it will look like this:
.wrapper {
display: table;
...
}
.wrapper .column {
display: table-cell;
...
}
Upvotes: 4
Rohit Azad Malik
Reputation: 32202
Try to this way
div.wrapper{
position:relative;
}
.column + .column:after {
content: "";
position: absolute;
top: 0;
bottom: 0;
border-left: solid 1px #ccc;
}
Upvotes: 0
Dan Hayden
Reputation: 464
Add display: flex; to div.wrapper this will make the direct children elements all the same height by default.
More info on display flex can be found on MDN article or this CSS trick article
Upvotes: 0
Related Questions
- Make floating divs the same height
- How to make floating divs and equal height
- How to make 2 floating divs the same height?
- div same height with floats
- floating div with same height
- Html layout: How to get arbitrary amounts of floating divs to have the same height?
- How to make floating inner divs the same height as the highest div
- Force all floating DIVs to match the height of their container
- make two floating divs the same height dynamically
- How can I apply equal heights to floating DIVs in this case?