עמודות עם border ב-CSS ללא תמונת רקע

יש ל-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>