נתקלתי לא פעם במצב הבא:

קיימת רשימת פריטים שצריכה להסתדר בעמוד באופן הבא:

• לכל אלמנט רוחב/גובה קבועים
• ישנם מספר אלמנטים בשורה
• בין שני אלמנטים צריך להיות רווח קבוע

רווחים קבועים בין כל תא

well, זהו מקרה קלאסי לטבלה! כן! אני ממש רואה את זה קורה, cellspacing מתאים וצבע רקע לטבלה, זה יהיה מושלם.

.NOT

אז CSS.

ההגדרות הן:

• כל פריט 50*50
• רווח בין כל פריט: 15 פיקסלים
• 4 פריטים בשורה

ניצור div שיכלול את כל הפריטים. רוחבו יהיה 245, כדי לאכלס 4 פריטים + 3 ריווחים בין פריט לפריט (4*50 + 3*15).
כדי ליצור רשימה של פריטים בשורה נשתמש ב-float:right (או left) כדי להצמיד אותם לצד כלשהו. גם ל-div הכולל יש לתת את אותו ה-float. בכל פעם שנגיע לגבול התיבה בה נמצאים הפריטים, הפריט הבא ייפול לשורה הבאה.
כדי לרווח בין אלמנט לשני נשתמש ב-margin-left.
ופה הקאצ':

הריווחים הלבנים הם ה-margin של הפריטים שאמורים
להיות בשורה הראשונה

כפי שאפשר לראות, הריווח נוצר עבור כל פריט.
עקב חוסר מקום לריווח מצד ימין, הקוביה האחרונה בכל שורה נופלת. עקב הריווח התחתון, יש ריווח מיותר בסוף התיבה.
כל העיצוב שלנו השתבש.
אבל אם אנחנו לא רוצים להציג לעמודה האחרונה ריווח מהצד ולשורה האחרונה ריווח מלמטה?
תחכומים של css 3 עדיין לא כאן, ולא יהיו פה בזמן הקרוב (עד ש-IE7 יתפוס את מקומו של 6).

הטריק

משאירים את ה-margin.
מגדילים ל-div המכליל שלנו את הרוחב ל-265, כדי שיכיל גם את הריווח השמאלי של התיבה האחרונה.
יוצרים עוד div, נותנים לו את אותו float, מעלימים לו overflow ונותנים לו את הרוחב 245, בתוכו שמים את ה-div עם הפריטים.
ה-div עם הפריטים בעצם ימשיך אבל בגלל ש"חתכנו" אותו בתוך ה-div העוטף החדש, לא נראה את הריווחים המיותרים מהצד.
ומה לגבי הריווחים מלמטה? ניתן margin-bottom שלילי ל-div עם הפריטים כגובה הריווח התחתון.

הקוד

<style type="text/css">
/*<![CDATA[*/
.wrapper {
	direction:rtl;
	float:right;
	overflow:hidden;
	width:245px;
	border:5px solid #000;
}
.table {
	float:right;
	width:260px;
	margin-bottom:-15px;
}
.item {
	background-color:#ADCBDA;
	width:50px;
	height:50px;
	margin-left:15px;
	margin-bottom:15px;
	float:right;
}
/*]]>*/
</style>
<div class="wrapper">
	<div class="table">
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
		<div class="item"></div>
	</div>
</div>

יש ל-CSS לא מעט פאקים בייצור. אי אפשר ליישר ורטיקלית בצורה נורמלית, אי אפשר ליצור "עמודות" באתר בצורה נוחה ללא "האקים".

יצירת 2 עמודות עם border מפריד, כאשר ה-border תלוי בגובה של העמודה הארוכה יותר, ללא תמונת רקע וללא javascript גם היא פעולה לא "סטנדרטית" עקב העובדה שלא ניתן להשפיע על גובה של אלמנט לפי גובה אלמנט אחר.

בתמונה הימנית ישנם שני divים עם float כדי ליצור שתי "עמודות". נשים border על השמאלית, אבל כשהיא תהיה קצרה יותר מהימנית – גם ה- border יהיה קצר יותר.

ה-border של העמודה השמאלית מגיע עד הסוף

ה-border של העמודה השמאלית מגיע עד סופה
של העמודה שקצרה יותר

התוצאה הרצויה

ה-border של ממשיך לפי העמודה הארוכה יותר

הסוד

לשתי העמודות יש border. אך העמודה השמאלית מוסטת פיקסל אחד ימינה. כך ה-borderים עולים אחד על השני, והארוך ביותר ממשיך עד למטה.

לכל עמודה יש border משלה, אך השמאלית מוסטת
פיקסל אחד ימינה, ועולה על הימנית

בכלל, הקונספט הזה של הזזת אלמנטים בעזרת margin שלילי או position הוא מעניין מאוד ויכול להוות פיתרון ראוי לכל מיני בעיות. אני בטוח שאעסוק בו במאמרים עתידיים.

הקוד

<style type="text/css">
/*<![CDATA[*/
#menu {
	float:right;
	border-left:1px solid #000;
	width:150px;
}
#content {
	float:right;
	border-right:1px solid #000;
	width:250px;
	margin-right:-1px;
}
/*]]>*/
</style>
<div id="menu">תפריט<br/>תפריט</div>
<div id="content">תוכן</div>