Перекрывающийся контент и проблемы эластичной ширины CSS

Question

Я немного новичок в веб-дизайне, хотя и добираюсь.Но у меня все еще проблемы с упругими раскладками и поплавками.Я думаю, в этом и заключается моя проблема с этой страницей, но я слишком неопытен, чтобы понять это.

Вот мои проблемы, проиллюстрированные: https://img.skitch.com/20120327-nwrm3t1u8cwppnwnegw8f2q7st.jpg

Вот скрипка с моим кодом: http://jsfiddle.net/C3Dw2/1/

Вот как это должно выглядеть: http://img.photobucket.com/albums/v410/justice4all_quiet/register_13.jpg

Я также хочу, чтобы правильный раздел прокрутки помещался в родительский элемент div.Прямо сейчас, это вытекает из этого.

Тьфу.

Любая помощь была бы удивительной.

---

РЕДАКТИРОВАТЬ

Единственная проблема, оставшаяся сейчасзначки не остаются в родительских элементах div.http://jsfiddle.net/xehMG/2/

Answer 1

См. Скрипту и код и демо:

Скрипка: http://jsfiddle.net/C3Dw2/4

Демо: http://jsfiddle.net/C3Dw2/4/embedded/result/

см. Снимок экрана для вывода:

Answer 2

Установите min-height для каждого из элементов, которые вы указали в процентах height и width. Процент будет эффективен только в том случае, если разрешение будет большим и охватывает все дочерние элементы.

Если вы хотите использовать проценты - обратите внимание на минимальную ширину, необходимую для их дочерних элементов, и установите эту минимальную ширину для своего родителя. Также используйте overflow:hidden|scroll|auto в качестве запасного варианта для управления переполнением дочерних элементов из его родителя.