In working my way through the code in the “Three-column liquid layouts” section, I can’t figure out what this rule is supposed to do, unless it’s to accommodate a particular browser:
#container{
margin-right:-200px;
}
The layout doesn’t seem to change (at least visibly) if it’s taken out.
And the site I’m working on will need borders around the sidebars, can y’all recommend a solid “holy grail” alternative?
Copy & paste the code below to embed this comment.
Hans Bangkok
The preview looked fine I swear! Here’s another try with code tagging:
Here’s an alternative way to use negative margins to get a three-column layout. I’ve used the example HTML from this article, but note the CSS methods used for layout are 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
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.
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. . .
Copy & paste the code below to embed this comment.
ohyeah hussakum
first, thanks to help me climb out oft the box
————————————————————————
i try to use it in asp.net
in file MasterPage.master
it can’t work
it can’t display like you in design page but
it cant preview in ie 7.0+ only
great article indeed!
I tested it with some odl browsers and yeah – it is not taht good but who cares? Just look at the recent stats of what users use and you’ll find that IE 6 is the oldest while IE 7 and FF are two equal leaders.
Brilliant! I was trying to figure out how to do a three column, equal height layout just last night, and though I hacked out a decent idea, the one in this article is so much simpler. Thanks!
Working on a website for our local volunteer fire department, and just can’t seem to get the columns right. Site looks okay in IE7 with the use of a few
‘s, etc., but not okay in Firefox and Opera. And Safari is way off. All I know about using this type layout came from your website.
Copy & paste the code below to embed this comment.
Victor
I have found this solution useful in getting my site done the way I want. Now, the only thing left is to figure out how to center the entire layout in the middle of the screen, versus having it align to the left edge of the screen. Any thoughts?
140 Reader Comments
Back to the ArticleHans Bangkok
In working my way through the code in the “Three-column liquid layouts” section, I can’t figure out what this rule is supposed to do, unless it’s to accommodate a particular browser:
#container{
margin-right:-200px;
}
The layout doesn’t seem to change (at least visibly) if it’s taken out.
And the site I’m working on will need borders around the sidebars, can y’all recommend a solid “holy grail” alternative?
Hans Bangkok
The preview looked fine I swear! Here’s another try with code tagging:
Here’s an alternative way to use negative margins to get a three-column layout. I’ve used the example HTML from this article, but note the CSS methods used for layout are 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
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:
<br /> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”<br /> “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”><br /> <html><br /> <head><br /> <title>3 columns, liquid center</title><br /> <style type=“text/css”><br /> body{<br /> margin:0;<br /> padding:0;<br /> }<br /> #container{<br /> background-color:#0ff;<br /> float:left;<br /> width:100%;<br /> display:inline; /* So IE plays nice */<br /> }<br /> #leftRail{<br /> background-color:gray;<br /> float:left;<br /> width:150px;<br /> position:relative;<br /> height:300px;<br /> }<br /> #center{<br /> background-color:yellow;<br /> float:left;<br /> width:100%;<br /> height:300px;<br /> }<br /> #rightRail{<br /> background-color:green;<br /> float:right;<br /> width:200px;<br /> position:relative;<br /> height:300px;<br /> }<br /> </style><br /> </head><br /> <body><br /> <div id=“container”><br /> <div id=“center”><br /> <div id=“articles”>Center Column Content</div><br /> </div><br /> <div id=“leftRail”>Left<br /> Rail</div><br /> <div id=“rightRail”>Right Rail</div><br /> </div><br /> </div><br /> </body><br /> </html><br />Stage 2:
add:
<br /> #articles{<br /> padding:0 200px 0 150px;<br /> }<br />Stage 3:
add:
<br /> margin-right:-100%;<br />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. . .
ohyeah hussakum
first, thanks to help me climb out oft the box
————————————————————————
i try to use it in asp.net
in file MasterPage.master
it can’t work
it can’t display like you in design page but
it cant preview in ie 7.0+ only
help me pls.
Angelo Amoroso
The solution is the multiple column proportional synchronized scrolling layout!
The SLIRK Layout.
Mikele C
great article indeed!
I tested it with some odl browsers and yeah – it is not taht good but who cares? Just look at the recent stats of what users use and you’ll find that IE 6 is the oldest while IE 7 and FF are two equal leaders.
Joe Kent
Brilliant! I was trying to figure out how to do a three column, equal height layout just last night, and though I hacked out a decent idea, the one in this article is so much simpler. Thanks!
John Grafflin
Working on a website for our local volunteer fire department, and just can’t seem to get the columns right. Site looks okay in IE7 with the use of a few
‘s, etc., but not okay in Firefox and Opera. And Safari is way off. All I know about using this type layout came from your website.
Website url http://www.jwgmg.com/TSVFD/index1.html
CSS url http://www.jwgmg.com/TSVFD/styles/style.css
Victor
I have found this solution useful in getting my site done the way I want. Now, the only thing left is to figure out how to center the entire layout in the middle of the screen, versus having it align to the left edge of the screen. Any thoughts?
cdorob
You can have a look as well at Flexi CSS Layouts – a Dreamweaver Extension that help you create Css layouts in Dreaweaver without coding.
mjstelly
Thanks for the article! I was really floundering in a sea of div’s, floats, and classes. I incorporated your model and got the alignment I needed.