"Kapok" method: 3-col liquid

Thread view:

Enable EMail Alerts

Start New Thread

Thread rating:

hansBKK - 08 Jul 2008 13:50 GMT

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. . .

Reply to this Message

Bergamot - 08 Jul 2008 19:03 GMT

> 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

Not new at all. The Ruthsarian layouts have been around for years and
use the same principles.
http://webhost.bridgew.edu/etribou/layouts/

It doesn't really matter much if you use margins, borders or padding to
get the 3-column result, it's all the same idea. Margins are good for %
widths, since borders can't be set in %.

> I've set the code up in three stages

Don't post code, post a URL.

Signature

Berg

Reply to this Message

Webmaster Forum / HTML, CSS, Scripts / CSS / July 2008

"Kapok" method: 3-col liquid