While coding sites using div based layout (no tables!), a common issue is getting the heights of your columns (usually divs floated:left) to match. Here is a solution I found online:
http://www.cssnewbie.com/equal-height-columns-with-jquery/
This will automatically figure out the height of the tallest div in your specified group and then set all of the of the divs to that height…hence, equal height divs.
Here’s what you do:
<script src="http://code.jquery.com/jquery-latest.js"></script>
Be sure to give each div you want to re-size the same class. In my example I used the class name “EqHeightDiv”. Note that you can set up different groups as well, just be sure to give each group a different class name.
<div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff</div> <div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stuff</div> <div class="EqHeightDiv" style="float:left;border:solid 1px #ccc;margin:10px;">Here is some stuff<br />Here is some stu<br />Here is some stuff</div>
<script type="text/javascript">
function equalHeight(group) {
tallest = 0;
group.each(function() {
thisHeight = $(this).height();
if(thisHeight > tallest) {
tallest = thisHeight;
}
});
group.height(tallest);
}
$(document).ready(function(){
equalHeight($(".EqHeightDiv"));
});
</script>
I'm a web developer, UI/UX specialist and online strategist with over 10 years of experience in the field. I am currently freelancing and am available for hire. I have hands-on experience in all stages of the SDLC. If you or your business needs a web site, could use some help with your online strategy, or if you need to get started with SEM, please feel free to contact me.
I can help you with: Web Site Design and Development, Search Engine Optimization, Search Engine Marketing, Multivariate Testing, Metrics Analysis, Campaign Optimization, Social Site Integration, E-mail Marketing and everything else that has to do with the Web.
I work/haved worked with the following technologies: XHTML, CSS, Javascript, Ajax, JQuery, MySQL, SQL Server, ASP, ASP.Net, Coldfusion, PHP, Wordpress, Flash, Google Analytics, Google Adwords.
