June 7, 201313 yr If you've ever tried to create an image gallery with captions, a product catalog or other floating block elements with automatic heights it's likely you have been tempted to use tables or create unsemantic surrounding divs. But now those days are over. I've created a cross browser solution that supports responsive design using lightweight raw JavaScript. Say goodbye to tables and css hacks and hello to JavaScript. Source Code here: http://www.nielsharbo.dk/videotuts/alignheights.zip Suggestions for improvement and other relevant comments are more than welcome.
June 7, 201313 yr Awesome, I will try that I use to use some js for the purpose, too, yours looks great.
June 10, 201313 yr Author Thanks for your comments Jack and Teodora... This looks cool. Shove it on Github though I havn't considdered submitting the code to Github as the code is more like a tutorial example than an actual script. But maybe I should as I havn't seen any similar code anywhere.
June 10, 201313 yr If you've ever tried to create an image gallery with captions, a product catalog or other floating block elements with automatic heights it's likely you have been tempted to use tables or create unsemantic surrounding divs. But now those days are over. I've created a cross browser solution that supports responsive design using lightweight raw JavaScript. Say goodbye to tables and css hacks and hello to JavaScript. Suggestions for improvement and other relevant comments are more than welcome. Display:table used in any element, like a div, can be useful to line up items with different heights, but remember that older browsers don't process display: table but these have a very small proportion of browser useage now. Display:table is not the same as old-fashioned tables; it's the modern equivalent that has the same effect but far more options and is suitable for page structure when used with divs or other elements. Edited June 10, 201313 yr by Wickham
June 10, 201313 yr Author Display:table used in any element, like a div, can be useful to line up items with different heights, but remember that older browsers don't process display: table but these have a very small proportion of browser useage now. Display:table is not the same as old-fashioned tables; it's the modern equivalent that has the same effect but far more options and is suitable for page structure when used with divs or other elements. Indeed display:table/row/cell can be used. The cool thing about the JavaScript solution is that it works great with responsive designs even without mediaqueries or extra wrappers as you can have the "boxes" floating
Create an account or sign in to comment