Bordures dynamiques que l'on peut retailler

 http://jsfiddle.net/lnplnp/MxKLH/

HTML

<div id="container">

  <div id="panel1" class="panel" >

    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.

  </div>

  <div id="panel2" class="panel" >

    some more text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.

  </div>

  <div id="panel3" class="panel" >

    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.

  </div>

  <div id="panel4" class="panel" >

    some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.

  </div>

  <div class="clear"></div>

</div>

CSS

.clear{

  clear:both;

}

#container{

  border: 1px red solid;

  margin: 0 auto;

  width: 900px;

}

.panel{

  background-color: #9999FF;

  float: left;

  height: 200px;

  padding: 2.5px;

}

#panel1{

  background-color: #FF0000;

}

JS

$(document).ready(function() {

  // init

  var containerWidth = $("#container").width();

  var nbpanels = $(".panel").size();

  var padding = 2.5;

 

  $(".panel").width( (containerWidth / nbpanels) - (nbpanels * padding - 2 * padding));

  $(".panel").resizable({

    handles: 'e',

    maxWidth: 450,

    minWidth: 120,

    resize: function(event, ui){

      var currentWidth = ui.size.width;

      // set the content panel width

      $(".panel").width( ( (containerWidth - currentWidth + padding ) / (nbpanels - 1) ) - ((nbpanels - 1) * padding) );

      $(this).width(currentWidth);

    }

  });

});