Question

.fooBar {
        float: left;
        display:inline-block;
        height: 600px;
        margin-right: 0px;
}

$('.fooBar').click(function(){
    $(this).css('margin-right', '20px');        
});

I have a bunch of div objects which are floating and horizontally laid out. I have a button that is supposed to space them out further in real-time. You can see the line of jQuery I’m using.

However, it doesn’t seem to work… at all. Any ideas on how to dynamically change a div’s margin-right property?

EDIT: Here is the markup:

<div class="fooBar" style="width: 200px;" ><image src="../work/test1.jpg"></div>
<div class="fooBar" style="width: 210px;" ><image src="../work/test2.jpg"></div>
<div class="fooBar" style="width: 450px;" ><image src="../work/test3.jpg"></div>
<div class="fooBar" style="width: 610px;" ><image src="../work/test4.jpg"></div>

EDIT #2: Removing the extraneous ‘inline-block’ seems to have fixed the issue. Thanks all!

Answer 1

The display and float styles are mutually exclusive (as far as I know) so you could start fixing it.