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

[gallyamov]

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

[LittlePony]

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

[gallyamov]

детализирую)
вот 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);
};

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

[LittlePony]

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

[gallyamov]

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

[LittlePony]

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

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