Prev: Multiple selectors in rule
Next: using CSS instead of tables <dd246223-1b98-48fb-af28-2b329ab9ccdd@k13g2000hse.googlegroups.com> <1a0c$487284e1$cef88ba3$6097@TEKSAVVY.COM> <VXVck.171777$8k.127138@newsfe18.ams2>
From: hansBKK on 8 Jul 2008 08:50
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. . .
From: Bergamot on 8 Jul 2008 14:03

hansBKK wrote:
> 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.

--
Berg
 | 
Pages: 1
Prev: Multiple selectors in rule
Next: using CSS instead of tables <dd246223-1b98-48fb-af28-2b329ab9ccdd@k13g2000hse.googlegroups.com> <1a0c$487284e1$cef88ba3$6097@TEKSAVVY.COM> <VXVck.171777$8k.127138@newsfe18.ams2>