الصورة الثابتة والمحتوى يتداخل الشريط الجانبي الثابت كدليل / حجم نافذة الشاشة ينخفض

Question

لدي صفحة بالهيكل التالي:

giveacodicetagpre.

وتنسيقها مع CSS التالية:

giveacodicetagpre.

عرض الصفحة على عريض يظهر المحتوى غرامة.ومع ذلك، كما قلل من حجم النافذة، أو إذا قمت بعرض الموقع في شاشة أقل دقة، فإن الصورة الثابتة والنص تحتها يبدأ في غموض الشريط الجانبي، على الرغم من أنها تعمل قليلا.علاوة على ذلك، عندما تقوم الصفحة بالتمرير، على الرغم من أن بعض النص ينتقل إلى مساحة الشريط الجانبي، فإن النص الموجود أسفله يتداخل عند التمرير.

مثال تقريبي على المشكلة يمكن رؤيته هنا: http://jsfiddle.net/4wqzp/

ما هي التغييرات التي أحتاجها لجعلها؟

تحرير: للتوضيح، كنت آمل أن إصلاح CSS / HTML عادي.JavaScript هو خيار، على الرغم من أنني أحاول تجنبه لأنني لم أستخدمها بالفعل في هذا الموقع حتى الآن.

Answer 1

لاستخدام تصميم تكيفي يستخدم طريقتين))، الأول هو استخدام bootstrap الإطار، والثاني هوكتابة استعلامات الوسائط