Hi!  I'm trying to figure out if it's possible to create an area at the bottom of the page, similar to the banner section at the top?  I thought about just sticking a "banner2" div class in the style sheet, but then realized I didn't know how to tell it it should be at the bottom of the page.

What I would like is for it to go...
banner
2 columns - side & content
banner2

(I'm joining some web rings and their banners don't fit in my side column, so I thought another section like this might work?)

Thanks!

Kat
Elven Darkness

One simple technique would be to create a new "middle stuff" (or perhaps in your case, "middle earth") DIV that wraps around the #content and #links. Then put the "bottom-banner" div after that. So a skeletal view would be:


That's just one way to do it. I don't think you need to style "middle" in any special way in your stylesheet, but you could if you wanted.

Another way would be to dispense with the "middle" bracketing div, and style the bottom div as "clear:both;"

NOTE: I haven't tested these. You might want to snag some code from this: http://www.xs4all.nl/~apple77/columns/

Thanks for the ideas Adam, I've been playing with it for a bit and the problem now seems to be, it gives me a 'bottom' section (thanks to the code on the site you included the link to), but it starts right after 'links' as opposed to after 'content' - so that my content runs right over it.

Short of making my links column obscenely long (which is a potential option I guess)... how can I get it to follow the content column instead?

What I have now is (in the main template)
div id="wrap"
div id="banner"
div id="content"
div id="links"
div id="bottom"

(wrap encompasses everything).  I tried flip-flopping content & links, but that left content hanging off the lower edge of links. :0  So I flipped it back, but now the "bottom" is behind "content" again.

Thanks!!

Kat
Elven Darkness

Using a "wrap" div as you mention won't help this particular problem (though it can help others). I think you want to wrap only the content and links sections, and leave the banner and bottom-banner outside it.

I tried doing it as:
banner
wrap
  content
  links
bottom

but it still looks the same.

I got the "wrap" from the link you sent (http://www.xs4all.nl/~apple77/columns/) - is there something else I could use in place of it.  "Middle" didn't seem to do anything.

Thanks!
Kat
Elven Darkness

It's a shortcoming of CSS.  You need to do the Javascript hack explained near the end of this article.

Actually, what I ended up doing was putting a table around the whole thing (I'm more familiar with html then css).  Did 3 rows and just inserted the div tags into the appropriate cells (banner in 1st row, another table with 2 columns, one for links and one for content in the 2nd row, and then bottom in the 3rd row).  Put the content as "float:left" and voila!  Not sure if that was the "right" way to do stuff, but it worked.

Thanks for the help though!

Kat
Elven Darkness

Jeffe--

I don't see how this limitation exists in MT. In fact, in 10 minutes of playing around, I found it was difficult to *avoid* a bottom footer once I put it in there. There are multiple ways to get there.

I started with one of the default MT stylesheets, and ripped out all non-positioning stuff. I then added some formatting to make things more obvious, and added a "bottom" style. I then generated some dummy HTML.

Take a look at:
http://crossroads.net/misc/bottom-banner.html

You can actually remove the entire "middle" div (and style) without upsetting the basic layout, but having it there gives you a safer playground, perhaps. The only way you'd have a problem with this would be if you used fixed or absolute positioning for one of the contained DIVs.