Remove margin for the last floated element in a responsive layout

Often if you have a series of floated thumbnails you will want to remove the margin from the last and perhaps first elements. In a responsive layout where you don't know the width of the container this is trick.

Here's some jQuery that shows you how:


//define the wrapper
var wrapper = $('.wrapper'),
boxes = wrapper.children(),
boxSize = boxes.first().outerWidth(true);
innerBoxSize = boxes.first().width();
//act on window resize
$(window).resize(function(){
//find the break point
var w = wrapper.width(),
breakat = Math.floor( (w - innerBoxSize) / boxSize) + 1;
//add class edge to the last element
boxes
.removeClass('edge')
.filter(':nth-child('+breakat+'n)')
.addClass('edge');
});

Make sure you replace .wrapper with the class of your wrapper. If you are not modifying margins and have equally sized (outer widths) boxes and you want to do something different like change a colour then use the code here:
http://jsfiddle.net/gaby/kXyqG/

I adapted the code on the above link to fit my situation where I wanted to change margins.

Add new comment

randomness