Force divs out the way on div enlargement
Basically, what I am trying to achieve is on clicking of an image, get the div to enlarge and force all other floating divs out of the way so it takes the first position.

For example. When I click a div to enlarge, on the first image it does this, which is great
![enter image description here][1]

It fills up the space at the top and forces the other 3 divs down.

But if I click on the second box, it does this

![enter image description here][2]

What I want is for 'Widget Box 2' to force 'Widget Box 1' down, so it can fill all of the space.

This is my jQuery code, I understand it isn't pretty at the moment, but I want it to work before I try to clean it up. Also, I know i use a lot of parents but thats because theres a lot of divs to to go up the DOM through!

    $('.magnify').toggle(function() {
			 var $this = $(this); 
			 
		  	$this.parents().closest('.widgetBox').animate({margin: '0 !important', height: '350px', width: '980px', position: 'absolute'});
			$this.parentsUntil('.widgetBox').children('dt').animate({width: '974px'});
		  }, function() {
			  
			var $this = $(this); 
			
			$this.parents().closest('.widgetBox').animate({margin: 'inherit', height: '350px', width: '300px', position: 'relative'});
			$this.parentsUntil('.widgetBox').children('dt').animate({width: '294px'});
		  });
	  });


My HTML code..

           <div class="widgetBox">
               <!--- FRONT OF WIDGET BOX --->
               <div class="front">
                  <dt>
                        Widget Box 1
                  </dt>
                  <div class="dd_content">
                      <dd>
                         <p>Lorem ipsum dolor</p>
                      <div class="icons"><img src="" class="magnify"/></div>
                  </div>
               </div>

And the CSS for the `WidgetBox` div

    .widgetBox {
	    width: 300px;
	    clear: right;
	    float: left;
	    margin: 20px 25px 20px 0px;
	    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	    position: relative;
    }

  [1]: http://i.stack.imgur.com/yZvsJ.png
  [2]: http://i.stack.imgur.com/1eUnx.png
Force divs out the way on div enlargement
===

Basically, what I am trying to achieve is on clicking of an image, get the div to enlarge and force all other floating divs out of the way so it takes the first position.

For example. When I click a div to enlarge, on the first image it does this, which is great
![enter image description here][1]

It fills up the space at the top and forces the other 3 divs down.

But if I click on the second box, it does this

![enter image description here][2]

What I want is for 'Widget Box 2' to force 'Widget Box 1' down, so it can fill all of the space.

This is my jQuery code, I understand it isn't pretty at the moment, but I want it to work before I try to clean it up. Also, I know i use a lot of parents but thats because theres a lot of divs to to go up the DOM through!

    $('.magnify').toggle(function() {
			 var $this = $(this); 
			 
		  	$this.parents().closest('.widgetBox').animate({margin: '0 !important', height: '350px', width: '980px', position: 'absolute'});
			$this.parentsUntil('.widgetBox').children('dt').animate({width: '974px'});
		  }, function() {
			  
			var $this = $(this); 
			
			$this.parents().closest('.widgetBox').animate({margin: 'inherit', height: '350px', width: '300px', position: 'relative'});
			$this.parentsUntil('.widgetBox').children('dt').animate({width: '294px'});
		  });
	  });


My HTML code..

           <div class="widgetBox">
               <!--- FRONT OF WIDGET BOX --->
               <div class="front">
                  <dt>
                        Widget Box 1
                  </dt>
                  <div class="dd_content">
                      <dd>
                         <p>Lorem ipsum dolor</p>
                      <div class="icons"><img src="" class="magnify"/></div>
                  </div>
               </div>

And the CSS for the `WidgetBox` div

    .widgetBox {
	    width: 300px;
	    clear: right;
	    float: left;
	    margin: 20px 25px 20px 0px;
	    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	    position: relative;
    }

  [1]: http://i.stack.imgur.com/yZvsJ.png
  [2]: http://i.stack.imgur.com/1eUnx.png