זה עבור גורואי ה-CSS: הצוות הטכנולוגי שלנו עדיין מתמודד עם העיצוב המחודש שלנו ובונה מערך תכונות טוב יותר (כולל גרסה נטולת JavaScript של האתר עבור אנשים בדפדפנים ישנים יותר ושומרי בלוג מסורתיים), אבל יש בעיית סגנון אחת זה הפריע למעצבים שלנו.
הבעיה, כפי שמוצג בתמונה למעלה, כוללת את התמונות שלנו ואת המודעות של 300 פיקסלים המופיעות בשורה. הבעיה מסתכמת בכך: הפריסה שלנו מורכבת מ-div content של 620 פיקסלים, שבתוכו אנחנו צריכים שתי עמודות של 300 פיקסלים לתמונות ופרסומות שיכולות לצוף ימינה ושמאלה, עם מרזב של 20 פיקסלים ביניהן. הבעיה היא כזו:
כאשר המרזב של 20 פיקסלים נמצא שם, התמונה לא תרחף ליד המודעה, כך שאם מופיעה תמונה בזרימה שליד הפרסומת, היא נדחפת למטה מתחת למודעה. המעצבים בגאוקר שעובדים על זה מבולבלים. הפתרון החלקי היחיד שהם מצאו כולל יצירת shims באמצעות divs ריקים, אבל זה לא פתרון שאנחנו מרוצים ממנו. כָּך!
אשף ה-CSS הראשון שיכול לפתור לנו את הבעיה הזו, אם אפשר, לוקח הביתה פרס של $2,000. הפתרון לא צריך לכלול JavaScript או shims, הוא צריך להיות CSS טהור, והוא צריך לשלב את המרזב של 20 פיקסלים מבלי לבלבל את זרימת התמונות.
כדי לקבל מושג איך זה צריך להיראות, לא צריך להופיע טקסט בתוך המרזב המצוי בתמונה למעלה, אבל התמונה והמודעה אמורות להיות מסוגלות לשבת זו לצד זו - שתיהן ללא טקסט ביניהןועם שורת טקסט ביניהם. כפי שאחד הקוראים ניסח זאת בצורה ראויה:אנחנו לא יודעים איך לסגול. אם אתה חושב שיש לך תיקון העונה על הצרכים והקריטריונים שלנו, שלח אותו בהערות למטה. האדם הראשון שמגיב עם פתרון שכן מקבל את הפרס של $2,000.