Lining up DIV edges dynamically

I've been looking all over for help on this, and also tried O'Reilly's DHTML book for reference, but I can't seem to figure it out.

I basically have two DIVs, of different height & width, that are side by side. The one on the left is the smaller of the two, and will always have the same content (never changing in size). The one on the right, however, contains content that changes daily, and consequently needs to have a dynamic size.

What I want to do is get the position of the bottom margin of the one on the left to change relative to the one on the right, so that the bottoms always line up (the left, top, and right margins of both DIVs have fixed positions -- only the bottom changes). Maybe I can't see the forest for the trees, but for the life of me, I can't figure it out.

try placing both DIVs in a parent DIV and then position them both relative to the bottom of the parent DIV.. that should work...

or try placing your static DIV inside the right DIV align it to the bottom left. I *think you can do that...

or try placing placing both DIVs in two adjacent cells of a table and valign the contents of both cells to "bottom"...


One of the three should work I hope

<BLOCKQUOTE><font size="1" face="Verdana,Arial,Helvetica">quote:</font><HR>Originally posted by JKB:
try placing both DIVs in a parent DIV and then position them both relative to the bottom of the parent DIV.. that should work...
[/quote]

[...]

Oops... I think I wasn't clear in my original post. The content in the left-most DIV does not change in size, but the DIV would change in size, depending on the size of the right DIV. The goal is to have the tops of the two DIVs always show up at the same position, and have the bottoms of the two DIVs line up. If the content of the right DIV is large, then the left DIV would have blank space after its content, before the bottom margin.

I think I got you now.. do you have to use DIVs? I am guessing that this can be accomplished by making a table and having two adjacent cells with the DIVs in them if necessary. With adjacent cells in a table as you probably know, they both have to be the same height unless you use colspan. From there, you can specify the content of the cell on the left to stick to the top with valign="top" while the content of the right cell can run on forever if need be all the while stretching the size of the left cell along with it.

If you have to use DIVs wrap the contents of the cells in a DIV. With styles however, you can do just about the same things with a table cell (TD) tag as with a DIV and it would also be more compatible with older versions of Netscape as they dont recognize the DIV tag.

Hope this helps

I do need to use DIVs for a number of reasons. Also, I'm familiar with the use of TABLEs and agree that I could easily do this with TABLEs.

However, there are several reasons I wish to avoid tables altogether. The most prominent is how long it takes for Netscape to render complex tables over a modem. Also, for some reason Netscape doesn't like mixing DIVs with TABLEs (so a combination of the two really isn't a solution). All sorts of undocumented things start happening, such as alignment occuring off the screen.

Perhaps this will help convey what I am trying to achieve. The only thing I want to change position is the bottom margin of the two boxes, and I want it to happen uniformly. I can get the alignment to happen correctly by specifying an absolute position. However, i f I simply set the DIVs to align on the bottom margin, the top margins could be in different positions. There are other graphical elements on the page that necessitate this particular configuration, so that's not really changeable either. I'm only showing you the boxes, because I'm trying to focus on the specific problem itself.

I've investigated other options and what I've come up with is that in order to accomplish this, I need to get the position the bottom margin of News and pass it to a function that positions Toolbox accordingly. However, that's where my problem lies (assuming there isn't any other solution). How do I get the those coordinates?

Initially, I posted a more generic question in case there was a built-in way of doing it that I was overlooking. I didn't want to be too specific, because then I would be potentially avoiding simpler solutions.

Also, I didn't mention it before, but I thought I should (since I'm mentioning Netscape so much). This site needs to look the same in Internet Explorer as it does in Netscape. It's just that much of what I'm doing is to try to avoid the kooky ways Netscape interprets what I'm trying to do.

Thanks for your time, BTW. I appreciate it.


[This message has been edited by pieux (edited August 23, 2000).]

I have a similar question, dealing with dynamically lining up div layers.

I have a div with a small table in it. This table has several rows, each with an area which calls up one of several other div layers when the mouse rolls over it. I want to line up the top of these layers with the table cell of the first layer, and the left edge with the right edge of the first layer.

Any input would be greatly appreciated as I have no idea of how to go about doing this. My first attempt was to put all the layers in an outer layer, and to tell the other ones to have a 'relative' position, which I'm assuming (?) means relative to the mouse cursor... the behavior was not what I wanted.

I have learned to avoid mixing tables with DIVs, because of the undocumented problems it causes. I would recommend converting your table to multiple DIVs. Also, you might find better cross-browser compatibility if you specify an absolute position for all the DIVs.