Ideally, but I can't wrap my head around how, I would like for the height of all the columns to be the height of the largest column, which in my example above would be the column on the right. Then the shadow image would always be centered, and the space can expand if needed.
This is the current code...
#footer .column { padding-right: 25px; margin-right: 10px; float: left; width: 285px; background: green url('../img/footerShadow.png') center right no-repeat; }
I know you're learning jQuery so I just wanted to share that I learned this really cool method from the jQuery map() documentation. Basically it uses map and Math.max to accomplish the same thing (demo).
// get the heights of each column in an array // [ 20, 20. 560 ] in this example var heights = $('.column').map(function(i,e) { return $(e).height(); }).get();
// set all column heights to the max height in heights $('.column').height( Math.max.apply(this, heights) );
If I have no height specified, the image is either to large to display, or as I want it centered, ends up being centered too high up the page.
This image illustrates the issue....
Footer column issue
Ideally, but I can't wrap my head around how, I would like for the height of all the columns to be the height of the largest column, which in my example above would be the column on the right. Then the shadow image would always be centered, and the space can expand if needed.
This is the current code...
Any tips?
Ta,
I know you're learning jQuery so I just wanted to share that I learned this really cool method from the jQuery map() documentation. Basically it uses
mapandMath.maxto accomplish the same thing (demo).Also, Chris made a post a while back on how to make Equal Height Blocks in Rows which I later turned into a plugin.