Geek Answers Handbook

How can I make the bottom margin of a div equal to its percentage computed right edge?

I have an array of floating divs that match 4 in a row. Their width and right margin are up to 100%. However, their lower bound is static. CSS below:

.item { position: relative; float: left; height: 200px; width: 23%; margin-right: 2%; margin-bottom: 15px; background-color: #ddd; }

Is there a way to get the value of the right margin and apply it to the bottom margin so that they are always consistent?

Here is an example of what I have: http://jsfiddle.net/kVZMU/

+4
source share
3 answers

Why not use margin-bottom: 2% ?

Fiddle: http://jsfiddle.net/kboucher/uVfRL/

+2
source 
 $('.item').each(function(){ var val = $(this).css('margin-right'); $(this).css('margin-bottom', val); });

Through javascript, get the right margin and set it as the bottom margin. http://jsfiddle.net/cxn9E/

+1
source

With jquery you can set the bottom margin to the right edge. Set it on the finished document and resize the window so that it is always consistent.

try it

 var setMargin=function(){ var divItems=$('div.item'); var marginRight=divItems.css('margin-right'); divItems.css('margin-bottom',marginRight) } $(document).ready(function(e) { setMargin(); $(window).resize(function(e) { setMargin(); }); });

Check out http://jsfiddle.net/kVZMU/2/

+1
source

More articles:


All Articles