Topic: css footers with dynamic tables

I'm not even sure if this is the proper forum, but I thought I would start here.

I have a page that is broken into a few "stacked" divs, like so:

<div id="container">

 <div id="header"></div>

 <div id="content"></div>

 <div id="footer"></div>

</div>

I have the footer working and all of that, but the problem I'm running into is that in some places in the application, the content div's contents are affected by javascript. For example, a particular html table has rows added or deleted. As the table grows, the full pages isn't re-drawn, and therefore my footer doesn't move, so the footer ends up overlapping the contents of the content div.

Any tips?

RypTide

"Music is the vernacular of the human soul" ~ Geoffrey Latham

(Edited by RypTide on 11-09-2004 18:17)

It seems that this depends a great deal on how the positions are detemined, and how you are changing the content of the page...

hmm that is strange, as DL-44 said, it really does depend on the position property of your div's. If you've set the position to be absolute then they'll never move unless you have the javascript tell them to, but we really need to know some more information to help you here.

Cheers,

Blaise.

The content div is relative, and the footer is absolute, positioned to the bottom of the container.

I'm aware of the troubles of css footers in general, but I have wrestled that problem into submission, it seems. Now the problem is that my content div is modified (grows longer) with the addition of rows to a particular table in the div, using javascript.

I can't paste everything because it's proprietary, but I was hoping to get some clues anyway.

The point you made about the absolute positioned div not moving unless told to by the javascript is something I should look at, I guess. Perhaps I can add something to the javascript which adds the table row so that it also changes the position of the footer div?

RypTide

"Music is the vernacular of the human soul" ~ Geoffrey Latham

RypTide: have you had a lookt at ALA: Exploring Footers by Bobby van der Sluis ?

Are you using div's to show tablular data? (The thread name makes me think you are) If it is tabular, if you use tables I think it would be easier to get it to align correctly compared to using divs.

quote:

---

I can't paste everything because it's proprietary, but I was hoping to get some clues anyway.

---

Can you make a "mini demo" that doesn't have anything proprientary, but displays your problem?

Or is it possible to fill in some more details? Like, how are you editing the cotent, with the DOM? Its hard to help vague questions.

I don't know if this has to do with your problem, but it looks like you are assigning multiple elements the same ID. If you want them to look the same, you should be assigning them the same class, ID's are used to differentiate elements, since it's unique. (Currently, most browsers do allow you to use the same ID for multiple elements)

Hope this helps
--monkey

ninmonkeys: tables are being used within the content div to display tabluar data therein.

I will see about a mini-demo if I get time this afternoon.

The contents of the content div is standard html. Tables. There is a javascript function (which I did not write and have not examined as of yet) which will allow a user to add a row to an html table via an "add row" link.

What elements am I assigning the same ID? Those are three separate and uniquely identified elements within a container element. I am using "id" rather than "class" because those elements are the same throughout the site, and are positioned the same everywhere.


All: I do realize this is a vague question at best. Just wondering if anyone had a similar experience.

RypTide

"Music is the vernacular of the human soul" ~ Geoffrey Latham

quote:

---

RypTide said:

What elements am I assigning the same ID? Those are three separate and uniquely identified elements within a container element. I am using "id" rather than "class" because those elements are the same throughout the site, and are positioned the same everywhere.

---

Forget what I said about that. I thought you were doing something like

<div 

id="foo">1</div>

<div id="foo">2</div>

<div id="foo">3</div>

Maybe this is your problem, I just noticed what he and you said:

quote:

---

Blaise said:

If you've set the position to be absolute then they'll never move unless you have the javascript tell them to,

---

quote:

---

RypTide said:

and the footer is absolute

---

yup, exactly.

So I think my only solution here is to modify the positioning of the footer div dynamically in the function that adds a row to the offending table.

RypTide

"Music is the vernacular of the human soul" ~ Geoffrey Latham