הכלת DIV בDIV

[Senior]

היי, נתקלתי בבעיה שאני לא ממש מוצא לה פתרון..

נניח יש לי DIV שקוראים לו CONTAINER ויש בו 2 DIVים:
DIV אחד אני רוצה ליישר לימין
וDIV אחד אני רוצה ליישר לשמאל
(בדומה אם משהו מכיר לעיצוב שמגיע עם WORDPRESS - התוכן והsidebar).

הבעיה שכשאני קובע שאחד הוא FLOAT ל LEFT ואחד הוא לRIGHT.
הCONTAINER שלי לא גדל לפי הDIVים..כלומר פתאום הHEIGHT שלו לא מותאם
עם הHEIGHT של הDIVים שבתוכו..הם כאילו יצאו ממנו ולא שייכים אליו..(אני מעוניין שהHEIGHT של הCONTAINER
יהיה לפי הDIV הגדול משניהם בעצם).

ניסיתי לשחק גם עם ה display: inline אבל גם לא הצלחתי..

משהו יודע איך אני גורם להם "להישאר" בDIV שמכיל אותם?

תודה רבה!

נדב

[meshuga]

תוסיף עוד DIV אחריהם עם clear:both זה יעבוד כמו שצריך.

[Senior]

וואו כמה פשוט

ממש תודה!

ד"א , למה זה קורה באמת? ולמה צריך להוסיף את השורה הזאת?

[איציק ברבי]

המטרה של clear:both היא שלא יווצר מצב ויעלה עליו אלמנט אחר.

[IgalSt]

נכתב במקור על ידי meshuga

תוסיף עוד DIV אחריהם עם clear:both זה יעבוד כמו שצריך.

למרות שזה עובד, הפתרון הזה לא מומלץ.
ככלל, אין שום סיבה ללכלך את ה-DOM ע"י הוספת אלמנטי כדי לטפל ב"בעיות" עיצוביות.
העיקרון הבסיסי הוא ההפרדה בין התוכן (HTML) לעיצוב (CSS)

פתרון יותר טוב לבעיה יהיה עם generated content:

#CONTAINER:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

הקוד הזה מגיע ממאמר מעולה על floats שאני ממליץ בחום לקרא:
All About Floats מ-css-tricks

[meshuga]

נכתב במקור על ידי IgalSt

למרות שזה עובד, הפתרון הזה לא מומלץ.
ככלל, אין שום סיבה ללכלך את ה-DOM ע"י הוספת אלמנטי כדי לטפל ב"בעיות" עיצוביות.
העיקרון הבסיסי הוא ההפרדה בין התוכן (HTML) לעיצוב (CSS)

פתרון יותר טוב לבעיה יהיה עם generated content:

#CONTAINER:after {
   content: ".";
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

הקוד הזה מגיע ממאמר מעולה על floats שאני ממליץ בחום לקרא:
All About Floats מ-css-tricks

קודם כל תודה, חידשת לי, המאמר נהדר. למרות שאני לא שש אף פעם ללכת על חידושים מהסוג הזה בעיקר בגלל תמיכת דפדפן.
זה תלוי מה הדרישות. אם הדרישות לקוח שלך הם תקינות גם בIE7 לדוגמא, אין לך ממש ברירה כי זה לא נתמך שם.
כיום אני יכול להגיד שרוב הלקוחות (בעיקר בתחום העסקי שם לא "רצים" לעדכן מערכות הפעלה) שפועלים על XP עם IE7..זה עצוב..אבל בסופו של דבר מה שהלקוח רואה (ולא ממש אכפת לו שזה רק אצלו ושזה בערך 2% מהאוכלוסיה) זה מבחינתי איך שהאתר נראה, לא איך שהגולשים רואים. איך שהוא רואה ביום יומי.

[IgalSt]

נכתב במקור על ידי meshuga

קודם כל תודה, חידשת לי, המאמר נהדר. למרות שאני לא שש אף פעם ללכת על חידושים מהסוג הזה בעיקר בגלל תמיכת דפדפן.
זה תלוי מה הדרישות. אם הדרישות לקוח שלך הם תקינות גם בIE7 לדוגמא, אין לך ממש ברירה כי זה לא נתמך שם.
כיום אני יכול להגיד שרוב הלקוחות (בעיקר בתחום העסקי שם לא "רצים" לעדכן מערכות הפעלה) שפועלים על XP עם IE7..זה עצוב..אבל בסופו של דבר מה שהלקוח רואה (ולא ממש אכפת לו שזה רק אצלו ושזה בערך 2% מהאוכלוסיה) זה מבחינתי איך שהאתר נראה, לא איך שהגולשים רואים. איך שהוא רואה ביום יומי.

שמח שאהבת את המאמר ולמדת ממנו.
במאמר הציעו גם פתרון שעובד עבוור IE7 עם overflow:auto.

האמת, אני כבר כמה חודשים שלא מתייחס ל-IE7 כלל, וטוב שכך.
הפילוסופיה שלי, ושל מפתחי front רבים נוספים, היא שיש גבול כמה טעויות היסטוריות של מיקרוסופט יכולות להאט את התפתחות האינטרנט.
אני אדאג לנראות סבירה ב-IE7 וב-IE8, אבל לא אתעקש על דברים שלא עובדים.
לדוגמה קח את העמוד תוצאות תחרות נטקראפט שעבדתי עליו (בצוות) בשבוע שעבר. התמקדנו בדפדפנים מודרנים והיית נפילה הדרגתית של התמיכה בהתאם לכיולות הדפדפן. IE9 לא מתמודדת עם אנימציות CSS? לא נוראה. הוא פשוט יקפוץ בין המצבים האלה. IE8 לא תומך ב-border-radius? אז יהיו שם ריבועים ולא עיגולים וכו'.

[meshuga]

נכתב במקור על ידי IgalSt

שמח שאהבת את המאמר ולמדת ממנו.
במאמר הציעו גם פתרון שעובד עבוור IE7 עם overflow:auto.

האמת, אני כבר כמה חודשים שלא מתייחס ל-IE7 כלל, וטוב שכך.
הפילוסופיה שלי, ושל מפתחי front רבים נוספים, היא שיש גבול כמה טעויות היסטוריות של מיקרוסופט יכולות להאט את התפתחות האינטרנט.
אני אדאג לנראות סבירה ב-IE7 וב-IE8, אבל לא אתעקש על דברים שלא עובדים.
לדוגמה קח את העמוד תוצאות תחרות נטקראפט שעבדתי עליו (בצוות) בשבוע שעבר. התמקדנו בדפדפנים מודרנים והיית נפילה הדרגתית של התמיכה בהתאם לכיולות הדפדפן. IE9 לא מתמודדת עם אנימציות CSS? לא נוראה. הוא פשוט יקפוץ בין המצבים האלה. IE8 לא תומך ב-border-radius? אז יהיו שם ריבועים ולא עיגולים וכו'.

כמו שאמרתי, הרוב תלוי בלקוח. ומה שהלקוח רוצה, הלקוח מקבל, אם הוא רוצה שזה יהיה זהה בכולם, אז נלך על האופציה הנחותה יותר (או המסורבלת יותר או הלוקחת יותר משאבים (שימוש בתמונות לרדיוס עגול) שימוש בJS בשביל דברים שCSS3 עושה) כדי שהוא יקבל את האתר שלו, איך שהוא רוצה.

[IgalSt]

נכתב במקור על ידי meshuga

כמו שאמרתי, הרוב תלוי בלקוח. ומה שהלקוח רוצה, הלקוח מקבל, אם הוא רוצה שזה יהיה זהה בכולם, אז נלך על האופציה הנחותה יותר (או המסורבלת יותר או הלוקחת יותר משאבים (שימוש בתמונות לרדיוס עגול) שימוש בJS בשביל דברים שCSS3 עושה) כדי שהוא יקבל את האתר שלו, איך שהוא רוצה.

אני לא חושב שזו הגישה הנכונה. אתה לא צריך להעניש את כל אותם הגולשים שמשתמשים בדפדפן מודרני בגלל לקוח שלא שומע בעצתך ומחליט שהוא יותר טוב מאיש המקצוע שהוא שכר.

ישנם הרבה פתרונות יותר טובים נוחים לעבודה. החל מ- conditional comments שתופסים רק IE לדורותיו ושם אתה עושה תיקונים ועוזר לדפדפן להבין. יש גם שיטה נוספת לכתיבת סלקטורים לדפדפן IE ספציפי ע"י נתינת class מתאים לתגית ה-html (ישנה דוגמה ב- html5 boilerplate) וגם ישנם פתרונות כמו PIE.htc שעוזרים לך ללמד דפדפנים מיושנים לתמוך בחלק מתכונות css3.

[meshuga]

נכתב במקור על ידי IgalSt

אני לא חושב שזו הגישה הנכונה. אתה לא צריך להעניש את כל אותם הגולשים שמשתמשים בדפדפן מודרני בגלל לקוח שלא שומע בעצתך ומחליט שהוא יותר טוב מאיש המקצוע שהוא שכר.

ישנם הרבה פתרונות יותר טובים נוחים לעבודה. החל מ- conditional comments שתופסים רק IE לדורותיו ושם אתה עושה תיקונים ועוזר לדפדפן להבין. יש גם שיטה נוספת לכתיבת סלקטורים לדפדפן IE ספציפי ע"י נתינת class מתאים לתגית ה-html (ישנה דוגמה ב- html5 boilerplate) וגם ישנם פתרונות כמו PIE.htc שעוזרים לך ללמד דפדפנים מיושנים לתמוך בחלק מתכונות css3.

ידוע, שוב, הכל תלוי מה הלקוח מסכים, "דרדור אמצעים" (שאם הדפדפן לא תומך זה לא מוצג) או תצוגה זהה...לרוב, הם בוחרים בתצוגה זהה. וכן אני משאיר את זה ללקוח, כי זה לא משנה אם הוא מחליט שהוא יותר טוב ממני או לא שומע בעצתי, בסופו של דבר מה שהלקוח מבקש, הלקוח יקבל. וזאת הגישה תמיד, בעולם העסקים.