One of the things I like to use with CSS is percentages. Often, this goes a bit over the top; right now, I have a two column layout that looks something like this:

.leftcolumn {
    float: left;
    width: 22.340425%;
    margin-right: 1.06382%;
    overflow: hidden;
}

.rightcolumn {
    float: left;
    width: 76.59574%;
    margin-right: 0;
}

Which is about as "relative" as you can imagine. Combined with max-width and some judicious (and very sparse) HTML nesting, however, you can do some pretty nice resizing things before you have to go to the media-query and up–  or downsize your entire layout.

Unfortunately, if you want to use jQuery UI's drag-and-drop feature, percentages suck. jQuery will take them literally, and apply them to the helper in accordance with the first common relatively positioned parent, which can be disastrous; I was ending up with draggables so wide they didn't fit inside the drop zone.

Fortunately, there is a fix. Draggables have a list of options, one of which is "helper." The most commonplace arguments to helper are "clone" and "original." The first makes a copy of the dragged object; the second takes the dragged object out of its original flow and makes it mobile. Taking an object out of its flow, or making a copy and attaching it to a parent object, can have the aforementioned disastrous side effects. Helper can, however, take as an argument a function that returns a suitable object for dragging. By creating a copy of the original object, and assigning to it a hard width derived from the calculated width of the original, you can ensure that the helper's rectangle matches your eye's expectations. Like so:

$(el).draggable({
    'helper': function() { return $(this).clone().css('width', this.offsetWidth)[0]; }
    ... /* other options */
});

In this case, this refers to the object to be copied, obviously. jQuery passes it as context. This works for jQuery 1.5 and up, and jQuery UI 1.8.2 and up.