Recently, A List Apart posted "Multi-Column Layouts Climb Out of the Box", an article featuring the ingenius approach of multi-columns of equal height utilizing borders and negative margins. Read: No JavaScript! This is a perfect approach if you wish a sidebar of a single color. However, what if you wish for a border between content and sidebar? You have already used the border CSS property, so how could one accomplish this look?
The answer, although not utilizing ideal semantic design in the XHTML tree, resides in a nested div in the main content column.
View it in action!
I always name my sidebar div id "secondary-content" and my main content div id "primary-content". To create this effect, I created an id "primary-content-inner" inside #primary-content.
The thick border and margin-left styles are applied to #primary-content. However, the margin-left negative margin must increase by the width of the additional thin border (the black border in my example). In like manner, the width of #primary-content-inner must be reduced by the width of the additional border. #primary-content-inner carries the style for the additional thin border (as border-left here).
You also must apply the thin additional border to #secondary-content - a border-right in my example. You must add it here in case the sidebar is longer than #primary-content.
The only catch I could discern is that you must set your p tags to margin-bottom:0;. If anything inside #primary-content-inner has a margin-bottom, the thin border will not extend to the bottom of #primary-content, as the margins are outside of the borders. In effect, you will be making #primary-content larger than #primary-content-inner by the height of the margin-bottom of the last element, and thus your borders will not align.
The CSS:
-
/* I usually start with *,html margin and padding to zero. Then I reset it to what I actually want later. This eliminates the margin-bottom on p tags */
-
*,html{
-
margin:0;
-
padding:0;
-
}
-
/* I do want some spacing on p tags, so I create it here. Alter it to your choice - padding does not disrupt the borders */
-
p{
-
padding:5px;
-
}
-
-
#container{
-
margin:0 auto;
-
width:700px;
-
}
-
/* Settings widths are necessary. See the ALA article for detail on liquid and elastic layouts. */
-
#primary-content{
-
border-left:225px #ccc solid;
-
float:right;
-
margin-left:-227px;
-
width:475px;
-
}
-
#primary-content-inner{
-
border-left:2px solid #000;
-
width:473px;
-
}
-
#secondary-content{
-
background-color:#ccc;
-
border-right:2px #000 solid;
-
float:left;
-
width:225px;
-
}
The HTML:
HTML:
