[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