Дмитрий

jsfiddle.net/soledar10/x9wfxwL2
htmlbook.ru/css/caption-side

jsfiddle.net/soledar10/93z0yup5
jsfiddle.net/soledar10/4ckb8jh7

как вариант

jsfiddle.net/soledar10/348Lpkdo

приблизительно так
jsfiddle.net/soledar10/m87qxvxq

или так

jsfiddle.net/soledar10/v5c2rkhe

еще можно так

jsfiddle.net/soledar10/hx03ah5o

приблизительно так

jsfiddle.net/soledar10/zobc6rbc

Может быть это подойдет - tympanus.net/Development/GammaGallery

Внутри тега <form> не может находится другая форма
Движки такие как -webkit стараются отобразить, даже в корне невалидную разметку, и удаляют уж совсем абсурдные вещи. Поэтому вы скорее всего не увидите тег <form>
внутри <form>

jsfiddle.net/2bzes8fq

:before работает по IE8
htmlbook.ru/css/before

::before работает по IE9
htmlbook.ru/css3/before

$(document).mouseup(function (e) {
		var container = $("#footer-form");
		if (container.has(e.target).length === 0){
			container.hide();
		}
	});

Если обрезается на мобильных правая часть - проблема с viewport
в адаптивном шаблоне

<meta name="viewport" content="width=device-width, initial-scale=1.0">

в неадаптивном шаблоне
<meta name="viewport" content="width=1000">
Допустим, ширина контейнера 1000px и он не адаптируется. В таком случае внешний вид - белая полоса справа. Проблему легко устранить установив ширину окна просмотра 1020px. Ширина дизайна не изменяется, но мобильное устройство будет масштабировать его до 1020px.