- This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
Viewing 5 posts - 1 through 5 (of 5 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
So I have this issue which stems from wishing to use a background image in a column class with no height.
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….
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;
}
Any tips?
Ta,
How about using a bit of jQuery? http://jsfiddle.net/joshnh/XcVas/
Hi Joshua!
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) );
Also, Chris made a post a while back on how to make Equal Height Blocks in Rows which I later turned into a plugin.
@Mottie I’ll have to pore over that as it looks pretty awesome. Thanks for taking the time to help me out with my jQuery learning Rob!
@joshuanhibbert @Mottie Those examples looks nice thankyou. Guess I’ll need to learn jQuery…..