Everyone knows the issues that come up once we attempt to construct multi-column layouts during which the columns are of equal peak. It has been properly documented elsewhere, so I gained’t go into the small print right here.
Article Continues Under
A challenge I not too long ago labored on required an elastic format with two columns of equal peak, every with a unique background colour. As regular, there was no technique to inform which column could be taller. I instantly considered Dan Cederholm’s Fake Columns, however I wanted an elastic format. I additionally appeared on the <!– area parked MAR2013; not commenting all of them out since that is not a part of the mission truly –>One True Structure<!– –>, however this appeared buggy and required an excessive amount of further markup and too many hacks for my style. I even considered utilizing JavaScript to ensure the columns had been of equal peak, however that simply felt mistaken. Out of desperation, I virtually (gasp!) used a desk.
However no, there needed to be a greater method. I simply wanted to suppose “exterior the field.” And what’s exterior the field? Borders. If I might float my “sidebar” (or “rail”) div over the border of my “content material” div, I might simulate equal-height columns regardless of which one was the tallest.
If this sounds acquainted, that’s most likely as a result of a model of this technique was launched by Douglas Livingstone and prolonged by Holly
Bergevin and John Gallant at Place Is All the things. Whereas counting on the identical core principle, the tactic offered right here makes use of cleaner, much less deeply nested markup, consists of elastic and two-column format variations, and usually advantages from having been developed within the publish–One-True-Structure world. Right here is the way it’s performed. (Line wraps marked » —Ed.)
The HTML:#section2
<div id="container"> <div id="content material">That is<br />some content material</div> <div id="rail">That is the rail</div> </div>
The CSS:#section3
#container{
background-color:#0ff;
overflow:hidden;
width:750px;
}
#content material{
background-color:#0ff;
width:600px;
border-right:150px strong #f00; »
/* The width and colour of the rail */
margin-right:-150px; /* Hat tip to Ryan Brill */
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
}
I created a proper border on the content material div of the identical width and colour because the rail, then floated the rail div over it. The margin-right:-150px on the content material div permits the rail div to maneuver into the newly vacated house. If the content material div is taller than the rail div, the border grows with it making it seem that the rail is rising. I set the container’s background colour to match the content material so if the rail div is the tallest, the container grows with it and it seems that the content material column is rising. It solely takes a small change to the CSS to make the rail left-aligned, whether or not the content material or the rail is taller.
See it in motion or take a look at the elastic model; strive altering your font measurement and watch the format change with it.
Three columns: three colours#section4
The three-column format takes a barely completely different method: the borders are utilized on to the container div. (I might have performed this with the two-column layouts as properly however I didn’t consider it on the time. Line wraps marked » —Ed.)
The HTML:#section5
<div id="container"> <div id="heart">CENTER<br />COLUMN CENTER</div> <div id="leftRail">LEFT RAIL</div> <div id="rightRail">RIGHT RAIL</div> </div>
The CSS:#section6
#container{
background-color:#0ff;
float:left;
width:500px;
border-left:150px strong #0f0; »
/* The width and colour of the left rail */
border-right:200px strong #f00; »
/* The width and colour of the precise rail */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
place:relative;
}
#heart{
float:left;
width:500px;
margin-right:-500px;
}
#rightRail{
float:proper;
width:200px;
margin-right:-200px;
place:relative;
}
Test it out.
The middle column has a proper margin of -500px. This enables the left rail div to drift all the best way over it to the left fringe of the middle column. Unfavourable margins pull the sidebars into place. There are a number of methods to do that, however this one appears to work the perfect once we get to liquid layouts in a while.
I’ve floated the container div to honor the column heights as an alternative of setting overflow:hidden. It’s because the sidebar divs are exterior of the container div, floating over its borders, so they might be hidden utilizing the overflow setting: IE doesn’t disguise them, however Firefox, accurately, does.
The columns don’t want a background colour. For the reason that colours are set on the container div, which grows with the tallest column, the phantasm of equal peak is taken care of.
After determining the fixed-width layouts, I made a decision to try liquid layouts utilizing the identical approach. The sidebars would nonetheless should be fixed-width since most browsers gained’t respect a percentage-width border setting, however we are able to make the middle column liquid.
The CSS:#section8
#container{
background-color:#0ff;
overflow:hidden;
margin:0 100px;
padding-right:150px; /* The width of the rail */
}
* html #container{
peak:1%; /* So IE performs good */
}
#content material{
background-color:#0ff;
width:100%;
border-right:150px strong #f00;
margin-right:-150px;
float:left;
}
#rail{
background-color:#f00;
width:150px;
float:left;
margin-right:-150px;
}
Have a look.
The markup is identical because the two-column, fixed-width model, aside from some further content material to indicate what occurs when it wraps. The CSS doesn’t actually change a lot both, however there are a number of variations: the container two-column, fixed-width model not has a width, and I added peak:1% so IE will respect overflow:hidden. (I used the star HTML hack for this, however might have used conditional feedback to incorporate an IE particular type sheet.)
I additionally added a margin to create house on the edges; that is non-compulsory. The padding-right shrinks the house the content material div will take up: for the reason that content material div now has a width of 100%, if there was no padding on the container, the sidebar div could be exterior of the container and hidden. Lastly, the content material div’s width switches from fastened width to 100%, and margin-right:-150px is added to the sidebar div.
As with the two-column, fixed-width format, the left-rail model requires solely minor adjustments to the CSS. I added a easy header and footer for grins, and you may view the supply to see the way it’s performed.
Three-column liquid layouts#section9
A 3-column liquid format with equal-height columns has been referred to as many issues: “Holy Grail,” “One True Structure,” “ache within the @$$”… The next approach is comparatively painless, makes use of correct supply order, doesn’t require using a picture, and appears to be bug-free.
The HTML:#section10
<div id="container"> <div id="heart">Middle Column Content material</div> <div id="leftRail">Left <br />Sidebar</div> <div id="rightRail">Proper Sidebar</div> </div>
The CSS:#section11
physique{
margin:0 100px;
padding:0 200px 0 150px;
}
#container{
background-color:#0ff;
float:left;
width:100%;
border-left:150px strong #0f0;
border-right:200px strong #f00;
margin-left:-150px;
margin-right:-200px;
show:inline; /* So IE performs good */
}
#leftRail{
float:left;
width:150px;
margin-left:-150px;
place:relative;
}
#heart{
float:left;
width:100%;
margin-right:-100%;
}
#rightRail{
float:proper;
width:200px;
margin-right:-200px;
place:relative;
}
The margin and padding go on the physique this time. The margin pushes the format in from the perimeters of the display screen, and the padding is the width of the sidebars. The remaining space is the width that the container can develop to be: 100% of the browser width minus margin and padding. On the container div, I set borders and detrimental margins the identical width as these borders. This locations the borders over the physique padding, making every part fall into place. Then we simply can place the divs.
The following instance illustrates a nested liquid two-column format and a primary header and footer. View supply to see how straightforward it’s to place the content material into place and elegance it. The nested two-column format makes use of the border on the container approach. This allowed me so as to add a 2px left border to the content material and a 2px proper border to the rail and overlap them, creating the full-height divider between. This divider will develop with whichever column is tallest.
In case you needed to get carried away, you might remove the column divs and simply place the items of content material into place. As a result of the sidebars are actually the borders of the container div, they are going to nonetheless work. In case you actually needed to go loopy with it, you might remove the container totally and put the borders proper on the physique, attaining a three-column liquid format with columns of equal peak and no container divs! The one downside is that the background colour of the middle column can’t be a unique colour from the remainder of the physique—and eliminating the containers makes it rather more tough to place and elegance issues…however it may be performed.
I ought to notice once more that these methods solely work with fixed-width sidebars, as solely Opera permits you to set a border width utilizing percentages. Additionally, the rails can’t have a picture for a background, however which will change with the border-image property in CSS3.
So there you might have it: a number of columns, equal column heights, fastened or liquid heart column, clear markup, and CSS. All it took was somewhat considering exterior the field.
Test it out.