Here's a (new?) variation on using negative margins to get a three-
column layout - I've used the example HTML from A List Apart's article
by Alan Pearce:
http://alistapart.com/articles/multicolumnlayouts
for comparison's sake, but note the CSS layout method is quite
different, using padding on an "inner wrapper" div within the center,
rather than borders.
Three questions:
Do you see a problem with using this method as the basis for a fully
fleshed-out three-column layout?
Have you seen it used as such before, and if so, can you point to
further examples or information on the technique? (side note, if not, I
christen it the "Kapok" method since it uses padding <g>)
and (especially if your answers to the above two are no)
Can you point to "tried and true" three-column layout techniques robust
enough for a CMS-driven site where users are contributing unpredictable
content that may disrupt a fragile layout?
I've set the code up in three stages like a howto, so that newbies can
easily see the logic behind it.
Stage 1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>3 columns, liquid center</title>
<style type="text/css">
body{
margin:0;
padding:0;
}
#container{
background-color:#0ff;
float:left;
width:100%;
display:inline; /* So IE plays nice */
}
#leftRail{
background-color:gray;
float:left;
width:150px;
position:relative;
height:300px;
}
#center{
background-color:yellow;
float:left;
width:100%;
height:300px;
}
#rightRail{
background-color:green;
float:right;
width:200px;
position:relative;
height:300px;
}
</style>
</head>
<body>
<div id="container">
<div id="center">
<div id="articles">Center Column Content</div>
</div>
<div id="leftRail">Left<br /Rail</div>
<div id="rightRail">Right Rail</div>
</div>
</body>
</html>
Stage 2:
add:
#articles{
padding:0 200px 0 150px;
}
Stage 3:
add:
margin-right:-100%;
to the ruleset for the #center div
Here's my explanation for how the negative margin works, please let me
know if I'm off base:
By setting a negative margin equal to the width, the float rules act as
if this div has no width at all, allowing the following floated boxes to
overlap it.
Thanks for your time and attention, and hope someone finds this helpful,
or at least interesting. . .
