при изменении размера div элементы съезжают
 

Ситуация такова. Есть родительский div. В нем имеется еще три div в виде видимых колонок, имеющих набор элементов. И еще две колонки, которые скрыты, пока пользователь не кликнет по шапке, тогда колонка выедет. При раскрытии такой колонки размеры всех остальных меняются, скролл остается на месте, а элементы из-за уменьшения размера колонки опускаются ниже.
Так как элементы можно на лету перетаскивать из колонки в колонку, то неудобно после открытия скрытой колонки искать опустившийся ниже элемент в обычной колонке для перетаскивания.
Есть ли примерные предложения, как этого избежать? Заранее, спасибо. Если что, готов детализировать.

Детализировать сразу надо было, лучше всего даже показать. Но судя по всему нужно просто задавать фиксированные размеры

детализирую)
вот css колонок

.column {
	&.backlog { 
		float: left;
		margin-left: -4px;
		padding-left: 4px;
	}
	&.done { 
		float: right;
		padding-right: 4px;
	}

	&.backlog, &.done {
		display: none;
		background-color: #EEE5DE;

		.column-content {		
			position: absolute;
			bottom: 0;
			top: 70px;

			width: 20%;
		}
	}
}

.task-column {    
	width: 20%;

	.task-column-header-top, .task-details { padding-left: 10px; }
	.task-column-header-top { margin-top: 8px; }
	.task-column-name { display: inline; }

	.column-content {
		overflow-x: hidden;		
		overflow-y: scroll;
	}
}

вот код скрытия, открытия

ic.showColumn = function (column) {
	$(column).animate({
		width: 'show',
		paddingLeft: 'show',
		paddingRight: 'show',
		marginLeft: 'show',
		marginRight: 'show',
		opacity: 'show'
	}, 300);	
};

ic.hideColumn = function (column, duration) {
	var callback = function () {
		var columnType = column.dattr('taskstate-type');
		var columnName = $('.task-column-name', column).text();
		var tasksCount = parseInt(column.dattr('taskscount'));

		var columnPlaceholder = $('<div></div>', {
			'class': 'column-placeholder ' + columnType,
			'data-column-class': columnType
		}).insertAfter(column);

		$('<span/>', {
			html: columnName + (tasksCount == 0 ? '' : ' (' + tasksCount + ')')
		}).appendTo(columnPlaceholder);		
	};

	if (!duration || duration === 0) {
		column.hide();
		callback();
	} else
		column.animate({
			width: 'hide',
			paddingLeft: 'hide',
			paddingRight: 'hide',
			marginLeft: 'hide',
			marginRight: 'hide',
			opacity: 'hide'
		}, duration, callback);
};

даже не знаю, что еще может пригодиться

показывать лучше на jsfiddle, чтобы можно было видеть сразу в действии, или на своём сайте, где проблема и возникла.

если б я мог, это внутрикорпоративная вещь. мне по сути нужен толчок, просто не понимаю куда рыть

на jsfiddle можно модель рабочую создать, можно с тестовыми данными, чтобы не палить внутрикорпоративные секреты. А sass ещё компилировать надо, не все этим пользуются, не у каждого получится запустить ваш код у себя.

По теме вопроса: да, ширину нужно зафиксировать, тогда не будет ничего съезжать. Чтобы не съезжало в момент анимации, не стесняйтесь лишней обёртки. Если нужно, чтобы тем не менее блоки занимали всю ширину, сколько бы их ни было, пусть по ширине растягиваются контейнеры, которые содержат блоки с фиксированной шириной