Cyapa

clear: both;
https://jsfiddle.net/c5b5sp11/

Но вообще есть решения и поэлегантнее. Я имею ввиду без float.

Если коротко:

$('.search').focusout
(
	function()
	{
		$('.search').animate({width: 'hide'}, 350);
	}
);

Но учти что в твоем коде проблемы с обработкой события клика.

Увы, это невозможно. Лучше картинку вставить отдельно как псевдоэлемент у вашего div.

Я так понимаю, слайдер вы хотите на CSS, иначе вопроса о реализации не было, так как на JS это делается просто.

CSS реализация отталкивается от радио инпутов - на каждый слайд свой инпут. Под каждым слайдом уже есть текст, только он скрыт по умолчанию. При выборе радио инпута к слайду, связанному с ним, применяются определенные стили (показывается текст, увеличивается картинка).

<input type="radio" id="slide_1" />
<img src="slide_1.png" />
<p>Description 1</p>

p
{
    display: none;
}

#slide_1:checked ~ img
{
    width: 120%;
    height: 120%;
}

#slide_1:checked ~ p
{
    display: block;
}

Ни какого JS тут не нужно. Вообще, обычно такие вопросы решают на стороне сервера, но если уж нужно обойтись связкой HTML + CSS, то я предложу следующее: так как размер своего блока вы знаете, то нужно указать в процентах максимальный размер класса «name-file-attach-work» и добавить ему display: inline-block. Этого будет достаточно. Стоит только взять запас на четырехзначные расширения. картинку и трехзначные размеры (ведь вы приводите 1020 Мб, к ~1 Гб?). http://jsfiddle.net/9Anbz/1/