[thelist] "Sidebar" in CSS2 solved - was Re: CSS layouts
Kevin Martin
kevin at brasscannon.net
Fri Aug 30 10:17:01 CDT 2002
Awareness has dawned, thanks to a beautiful rewrite of my rat's nest
CSS by lon.kraemer and a bit more experimentation. For those who are
still intimidated by the seeming contradiction of "absolute" positioning
in CSS2 as "absolute, but relative to the parent container," be assured
that it really makes sense. You use "relative" containers to continue the
normal flow of your HTML, and attach (or embed) "absolute" containers
within the "relative" ones. It works wonderfully well.
Here's what Lon came up with based on my fumbling first try:
{
div.rightcol {
position: relative;
margin-left: 162px;
width: 600px;
}
div.sidebar {
position: absolute;
top:0;
left:-152px;
width: 124px;
}
The trick is how you apply it when you want more than one "sidebar" - e.g.
| Lorem ipsit...
Here's a | Sing along, you all know the words!
sidebar | I am the very model of a heroine barbarian
|
| This is more text
Another | These are the times that try
sidebar | men's souls; the summer solider
| and the sunshine patriot
The Secret is simply to add a new "rightcol" div for each sidebar!
Because the rightcol's are relative, they simply go with the flow
and stack nicely on top of each other. No problem there.
Because each sidebar is "absolute" (with respect to its "rightcol"
container!) it sticks out to the left BUT it stays with its rightcol
owner. Which is exactly what I was trying to do.
The example above, using the stylesheet above, would look like this:
<div class: rightcol>
<div class: sidebar>
Here's a sidebar
</div>
Lorem ipsit....
</div>
<div class=rightcol>
<div class=sidebar>
Another sidebar
</div>
This is more text....
</div>
A production-ready example is now at http://brasscannon.net/lhtest.html
Big thanks to Lon and boy, do I owe him a beer!
--
Kevin 'digger' Martin <evolt at brasscannon.net> says "I LOVE EVOLT!"
More information about the thelist
mailing list