Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Making Columns Render With Equal Height

DZone's Guide to

Making Columns Render With Equal Height

·
Free Resource
A problem sometimes faced by web developers is trying to get two (or more) columns in a multi-column layout to be the same height when the content is variable.  Rather than using an arbitrary hardcoded value, the heights can be equalized (to the tallest one) with this script.

Assuming two columns in div tags with ids of "leftside" and "rightside" this script will set the height of the shorter to the height of the taller one.  The page must be in standards compliant mode with a valid doctype or IE will mess it up in quirks mode.  For longer articles and discussion  visit my home site... ERT


Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}
\r\n","deleted":false,"likeStatus":{"liked":false,"score":0,"canLike":false},"zonetop":"","articleTags":[],"header":{"id":831878,"title":"Making Columns Render With Equal Height","imageUrl":"/themes/dz20/images/ArticleImg_8.jpg","link":"/articles/making-columns-render-equal","imageLink":"/themes/dz20/images/ArticleImg_8.jpg","titleEll":"Making Columns Render With Equal Height","type":"article"},"url":"/articles/making-columns-render-equal","isLocked":false,"draft":false,"articleContent":"","source":null,"modDate":1176169599000,"views":155,"isLimited":false,"tldr":null,"originalSource":"","articleType":"snippet"}]; WMODEL_DATA.perms = {"canDecidePick":false,"canPublish":false}; WMODEL_DATA.authenticated = false; WMODEL_DATA.firstArticleContent = null; WMODEL_DATA.isPreview = false; WMODEL_DATA.OPTIONS = {}; TH.installWidgetController('article.content', 'articleContent5', WMODEL_DATA, typeof controller == 'function' ? controller : null, [{name: 'partners', data: true},{name: 'DEFAULT', data: true}], ' oUhbblYOaqbcblYOaqbcC', null); })(); (function() { function controller($rootScope, $scope, TH$Service, TH$LocalStorage, newsLetterPlugCreator) { $scope.subscriber = {email:$scope.userEmail == null? '' : $scope.userEmail}; $scope.submitted = false; var portal = $rootScope.model.portal; var newsletters = TH$LocalStorage.makeMap('newsletter.anon.subs').newsletter.anon.subs || {}; $scope.nonsusb = (portal) ? (newsletters[portal.id]) ? newsletters[portal.id] : false : true; $scope.examplePlug = newsLetterPlugCreator('weekly', null); $.fn.riseUp = function(e) { $(e).slideUp("slow")} $.fn.riseDown = function(e) { $(e).slideDown("slow")} var fold = $(window).scrollTop() + $(window).height(); $(window).scroll(function () { if ($(window).scrollTop() >= $(window).height()) { $scope.showEmailSubPanel(); } }); $scope.showEmailSubPanel = function(){ if($scope.minimized == null || $scope.minimized == false){ if($scope.subscribed == null || $scope.subscribed == false) { $.fn.riseDown($(".emailSubPanel")); $scope.minimized = false; } } } $scope.hideEmailSubPanel = function(element){ $(element).slideToggle(); $scope.minimized = true; } $scope.maximizeSubPanel = function(){ $scope.minimized = false; $scope.showEmailSubPanel(); } $scope.submit = function(e) { $scope.submitted = true; $scope.subscribed = true; $scope.showSubscribed = true; var key = portal.id; newsletters[key] = true; TH$LocalStorage.preference('newsletter.anon.subs', newsletters); TH$Service.exec('newsletters.subscribeEmail', {email: $scope.subscriber.email, portal: portal.id }).then(function (success) { if (success) { $scope.errors = false; setTimeout(function () { $(e).slideToggle(); }, 5000); }else{ delete newsletters[key]; TH$LocalStorage.preference('newsletter.anon.subs', newsletters); } }); if($scope.errors == null){ $scope.errors = true; } }; $scope.changeColor = function(color){ $scope.dockColor = {'background-color': color}; } $scope.showDock = function(){ return $scope.minimized; } }; var WMODEL_DATA = {}; WMODEL_DATA.OPTIONS = {}; TH.installWidgetController('emailSubscriptions.popover', 'emailSubscriptionsPopover6', WMODEL_DATA, typeof controller == 'function' ? controller : null, null, ' oUhbaTnfejsgpZntffWVcC', null); })(); (function() { function controller($scope, $service, $location, SideBarService, $timeout) { if ($scope.edition) { $scope.date = moment($scope.editionDate).utc().format('MMM DD, YYYY'); } SideBarService.ctx.pageSize = $scope.pageSize; SideBarService.ctx.isPreview = $scope.isPreview; SideBarService.ctx.mode = $scope.mode; SideBarService.fn.loader = $service; var $window = $(window); function checkWidth() { var windowsize = $window.width(); $scope.width = windowsize; } // Execute on load checkWidth() // Bind event listener $(window).resize(checkWidth); if ($scope.edition) { SideBarService.ctx.edition = $scope.edition; } SideBarService.fn.scrollCheck = function() { $scope.$emit('thIfScrollCheck'); }; var currentFilter; $scope.$on('$locationChangeSuccess', function() { if (!$location.search().filter) { $scope.filter = 'latest'; } else { $scope.filter = $location.search().filter; if ($scope.filter == 'latest') { $location.search('filter', null); } } if (currentFilter == $scope.filter) { return; } currentFilter = $scope.filter; SideBarService.ctx.filter = $scope.filter; }); $scope.display = SideBarService.getList(); $scope.$watchCollection(function() { return SideBarService.getList(); }, function (n) { $scope.display = n; }); $scope.isActive = SideBarService.isActive; $scope.isExcluded = SideBarService.isExcluded; $scope.loadMore = SideBarService.load; $scope.loading = function() { return SideBarService.ctx.loading; }; TH.on('TapBarStatusChange', function(expanded) { if (expanded) { SideBarService.unblock(); } }) } var WMODEL_DATA = {}; WMODEL_DATA.edition = null; WMODEL_DATA.editionName = ""; WMODEL_DATA.pageSize = 20; WMODEL_DATA.isPreview = false; WMODEL_DATA.editionDate = null; WMODEL_DATA.OPTIONS = {}; WMODEL_DATA.mode = null; TH.installWidgetController('sidebar.content.list', 'sidebarContentList9', WMODEL_DATA, typeof controller == 'function' ? controller : null, [{name: 'DEFAULT', data: true}], ' oUhbkSMaaqbcdvVkcC', null); })(); (function() { function controller($scope) { var $window = $(window); function checkWidth() { var windowsize = $window.width(); var $element = $('div.sidebar.sidebarTapBar'); $scope.width = windowsize; if(windowsize <= 1024 && $scope.edition){ $('.fixContentRight').removeClass('fixContentRight'); // $element.removeClass('expanded'); // $element.addClass('tapNotExpanded'); $('.tap').show(); }else if($scope.edition){ $('.tap').hide(); $('.mainContentRow').addClass('fixContentRight'); $element.removeClass('tapNotExpanded'); $element.addClass('expanded'); } } // Execute on load checkWidth(); // Bind event listener $(window).resize(checkWidth); } var WMODEL_DATA = {}; WMODEL_DATA.edition = null; WMODEL_DATA.slot = null; WMODEL_DATA.OPTIONS = {}; TH.installWidgetController('sidebar.tapBar', 'sidebar', WMODEL_DATA, typeof controller == 'function' ? controller : null, null, ' oUhbkSMadabfWVcC oUhbkSMadabbWQbVkcC', null); })(); (function() { function controller($scope, shareThis, TH$Dialog, TH$Service, $location) { $scope.getEditUrl = function(id, type) { if (!type || type == 'article') { return '/content/' + id + '/edit.html'; } else { return '/dzone/staff/' + type + (type == 'refcard' ? 'z' : 's') + '/' + id + '/edit.html'; } }; $scope.share = function(socialNet, url, title){ shareThis.shareThis(socialNet, url, title); }; // $scope.mailShareLink = function(article) { // return 'mailto:?subject=' + encodeURIComponent(article.header.title) + '&body=Article: ' + encodeURIComponent('https://dzone.com/' + article.header.link); // }; $scope.canDelete = function(article) { return article.canDelete; }; $scope.canPublish = function(article) { return article.canPublish; }; $scope.canEdit = function(article) { return article.canEdit; }; $scope.toggleComments = function(article) { if(!article.isLocked) { TH$Service.action('articles.lockNode', {type: 'node', id: article.id}).then(function(result) { if(result){ article.isLocked = true; TH$Dialog.success('You have disabled all comments for this Article'); }else{ TH$Dialog.error('error','Your requested was denied') } }); }else { TH$Service.action('articles.unlockNode', {type: 'node', id: article.id}).then(function(result) { if(result){ article.isLocked = false; TH$Dialog.success('You have enabled all comments for this Article'); }else{ TH$Dialog.error('error','Your requested was denied') } }); } }; $scope.toggleLimitComments = function (article) { if (!article.isLimited) { TH$Service.action('articles.limitNode', {type: 'node', id: article.id}).then(function (result) { if (result) { article.isLimited = true; TH$Dialog.success('You have limited comments for this Article. Now all comments will go through moderation.'); } else { TH$Dialog.error('error', 'Your requested was denied') } }); } else { TH$Service.action('articles.unlimitNode', {type: 'node', id: article.id}).then(function (result) { if (result) { article.isLimited = false; TH$Dialog.success('You removed the limits for comments on this Article'); } else { TH$Dialog.error('error', 'Your requested was denied') } }); } }; $scope.shareTwitter = function($event, title, url){ $event.preventDefault(); $event.stopPropagation(); var twitter = 'https://twitter.com/intent/tweet'; var link = $location.protocol() + '://' + location.host + url; var ref = location.host; var params = '?text='+title+'&url='+link+'&ref=dzone.com&via=DZone'; var win = window.open(twitter+params, '_blank'); win.focus(); }; $scope.edit = function(link) { TH$Dialog.open({ loadWidget: 'links.postPreview', widgetArgs: { edit: link.id }, size: 'xbig' }).then(function (result) { $scope.link.title = result.title; $scope.link.linkDescription = result.content; $scope.link.thumb = result.thumb; $scope.link.tags = result.topics; }); }; $scope.deleteLink = function(article) { var title = article.title; var type = 'link'; if(article.header){ title = (article.header.type == 'article') ? article.header.title : article.title; type = (article.header.type == 'article') ? 'article' : 'link'; } TH$Dialog.confirm('Do you want to delete "' + title + '"?').then(function() { return TH$Service.action('delete', {type: type, id: article.id}); }).then(function() { article.deleted = true; }); }; } var WMODEL_DATA = {}; WMODEL_DATA.OPTIONS = {}; TH.installWidgetController('content.commentsSlider', 'contentCommentsSlider8', WMODEL_DATA, typeof controller == 'function' ? controller : null, null, ' oUhbaqbcaibvnWffWVcC', null); })(); (function() { var WMODEL_DATA = {}; WMODEL_DATA.name = "commentsSlider"; WMODEL_DATA.slot = null; WMODEL_DATA.OPTIONS = {"name":"commentsSlider"}; TH.installWidgetController('components.slider', 'componentsSlider7', WMODEL_DATA, typeof controller == 'function' ? controller : null, null, ' oUhballbvbdSaoUhM', null); })();