Dynamic Drive Blog Here
CSS Equal Columns Height script (v1.01)
A common pitfall of a CSS based columns layout is that the columns do not share a common height. Unlike a table based layout where the height of the table itself dictates the height of all of its columns, CSS columns are independent of one another in that respect. Now, this can be problematic (from a design standpoint) when you wish to style one of your CSS columns in a way that should extend all the way down to the end of the layout, such as giving a side column an explicit background color, a surrounding border etc.
This is a generic "CSS Equal Columns Height" script that will dynamically set the participating columns' heights to that of the tallest column's height, creating a uniform columns height layout. Use this script on any of our CSS Layouts for example. It's a matter of plug and play! To use this script, just insert this line of code into the HEAD section of your CSS layout page:
<script src="equalcolumns.js" type="text/javascript"></script>
As you can see, it references the external .js file "equalcolumns.js", which you should download (right click and select "Save As") and then upload to your own site.
This script is configured by default to automatically work with all of the layouts in our CSS Layouts section, whether 2 columns or 3 columns, fluid or fixed. Just add the script to the HEAD of any of these pages, and that's it!
If you wish to use this script to equalize the columns of your own custom CSS layout, open up "equalcolumns.js", and refer to the line:
ddequalcolumns.columnswatch=["leftcolumn", "rightcolumn", "contentwrapper"]
Change "leftcolumn", "rightcolumn" etc to the IDs of the CSS columns you wish to equalize. The script will do a check first to see if each corresponding column actually exists.
Comment Pages 1 of 21 pages 1 2 3 > Last »
Otherwise.. it works great on the "good" browsers. :-)
I observed the "loop" in IE6, but only in certain layout scenarios, and non when used on the layouts on DD CSS Library. What CSS layout did you use this script on that the "looping" occurred?
Just FYI, it's not actually a loop, just the script being called incessantly in IE6 per the setTimeout() function in this odd scenarios instead of only when the window actually resizes (to recalculate the columns widths). It seems under such situations, IE6 fires "window.onresize" whenever you alter the columns widths. This versus a loop, which would in fact crash the browser. In this case, the worst case scenario is simply that the script won't exactly be running at optimal efficiency in IE6.
I plan on updating the script soon to account for these odd layout scenarios where the issue occurs in IE6.
its a custom layout. I have a messy work-around for now... and will anxiously wait for your update. :-)
-Michael
I setup a conditional since the panels can change (2panel/3panel) depending on layout inaddition to offesetting the size of one column for layout reasons. But otherwise really straight forward... and since I am already using prototype... no need to link additional code.
Sorry its sloppy.. but here it is.
function equalizePanels() {
var col = $('content-navigation-panel');
var tbx = $('content-right-toolbar');
if(tbx && (Element.getHeight(col) < Element.getHeight(tbx))) {
col.style.height = Element.getHeight(tbx) + 'px';
} else if(tbx && (Element.getHeight(col) > Element.getHeight(tbx))) {
tbx.style.height = Element.getHeight(col)-25 + 'px';
} else {
var el = $('content');
col.style.height = Element.getHeight(el) + 'px';
}
}
The problem with this script and IE6 right now seems to be with CSS layouts that use absolute positioning (non of the layouts offered here do). I may be wrong, though at a glance I believe the problem is with IE6 mis-firing the onresize event handler whenever an absolutely positioned element is resized, instead of when the window is truly resized by the user. So whenever the script attempts to adjust one of the columns, the script runs, and a cycle (not loop) is formed. I was hoping for a simple fix, but it looks it will not be so straightforward. Once I have more time I'll see what can be done.
Is your custom layout based on absolute positioning for any of its main columns?
There are though a few IE hacks... but only using * HTML to fix sizing issues. the css is pretty straight forward.