Start Free Trial

asked on

How to make my absolute positioned div follow the browser window when rezising?

Hello all. Have the following code in my intranets top frame (yeah I still use frames and have to stick with that for a while). My problem is that when I rezise the browser the right aligned div doesn't follow the browsers edge. I would like to accomplish that somehow. Ideas?

BR MaB

#halge      {
      position: absolute;
      right: 0;
      top: 0;
      }

#weather      {
      position: absolute;
      right: 40;
      top: 0;
      }

<div id="weather">
<a href="something" target="_blank">
<img border="0" src="images/somepic.gif" /></a>
</div>
<div id="halge"><a href="something else" target="_blank">
<img border="0" src="images/otherpic.gif" /></a>
</div>

ASKER

the right aligned DIVS (NOT "the right aligned div")

Hi MaB,

There's nothing wrong with your code, except that you don't specify a unit (right:40px;) - so there's something else going on in the top frameset page.

1. What Browser are you using.
2. Can I see the rest of the page ?

Thanks,
Sean

ASKER

1.IE6
2. Of course. But it's a lot of code and would take up a bit to much space here so I'll have to lift the code to an external page with the loss of pictures and links but I'll do that.

Just one Q first though before copying the page. The div code is placed at the end of the document just before the </body>. Before that I have a table with fixed size. Could this be "pushing" the div to the right? As far as I know it shouldn't since absolute positioning doesn't take the rest of the code in consideration, but I want to check that with you anyway.

Well, your assumption is correct - the presence of a table won't impact the div position.
If there's nothing else in the page that could possibly have an effect - js, css styling, etc, then posting the code may likely not help - given your experience you will probably know if there's "anything" in there that could be causing a conflict.
What about in the frameset - is there anything different in there?

And when you resize the broswer - the div's are basically maintaining their position prior to resize, and so disapperaing from view, yes? Do scrollbar's get added when this happens if scrolling is set to auto on the top frame?

ASKER

Yep, the problem is most likely with the frameset. When I look at the page itself it displays correct but when I look at it in the frameset it gets this behaviour. It's probably because the frame that contains the page has scrolling=no.

ASKER

Setting scrolling="auto" didn't help though. I get the scrollbar but the div still disappears...

ASKER

And of course it doesn't, since I'm not rezising the page (that was a STUPID comment)

ASKER

Which leads to the question: Is there any way to rezise the frames page based on the size of the frame?

ASKER

I believe I'm out of luck here but the question needs to be asked...

You're confusing me...

Can you post the frameset code?

Is the width of your table fixed? It shouldn't matter, but just in case.

ASKER

>You're confusing me...

No wonder, sometimes I confuse myself ;-)

The frameset code:

<frameset framespacing="0" border="0" frameborder="0" rows="56,*,40">
<frame name="ctsatop" scrolling="no" src="topNew.htm" target="_self">
            <frameset cols="159,*" onLoad="reDisplay('Top',0,0,0);">
            <frameset rows="*,41">
                  <frame name="toc" scrolling="no" src="about:blank" noresize>
                  <frame name="ctsameny" scrolling="no" src="meny4.htm" noresize target="main">
            </frameset>
      <frame name="content" scrolling="auto" src="about:blank" target="popup">
            </frameset>
<frame name="ctsabottom" scrolling="no" src="nyhet_bottom.htm" target="_new">
<noframes>
<body>
Din läsare stöder inte frames. <a href="http://download.microsoft.com/download/IE60/fnlrtw/ie6/W98NT42KMe/SV/ie6setup.exe">Uppgradera<span lang="sv">?</span>!</a>
</body>
</noframes>
</frameset>
<frameset>
</frameset>

ASKER

It seems like the frame page (i.e topNew.htm) adjusts its size to the frame size on load. But when rezising the whole browser window with all the frames the frame page doesn't readjust the div but leaves it where it was on load. If I refresh the frame page after rezising the browser window the divs pop to their right place, they just dont do it dynamically.

Does this make any sense to you?

The code is still fine, except for an additional empty frameset at the end that isn't necessary.
I don't see anything that would cause the div's to move from their absolute position.

Just out of curiosity, what happens when you add the same code to the bottom frame (nyhet_bottom.htm)

Failing that - you'll need to post the code from the page...

Missed your last comment - let me read through it...

No - it doesn't make any sense. The div's should move as the size of the window changes :-(

Better post the page then...

ASKER

>Just out of curiosity, what happens when you add the same code to the bottom frame (nyhet_bottom.htm)

Do you mean the whole page code from topNew.htm (just replacing the frame src) or do you mean adding the div code to the page that's the bottom frames srcpage?

The second - just add the 2 div's and the corresponding CSS into the head of the page.

ASKER

If I do that the divs move with the browser edge, strange....

ASKER

Then it must be something with the page, mustn't it?

ASKER

I've put the page here:

http://magnus.homepage.nu/top.htm

When I open that in the browser it displays the faulty behaviour so there must be something I'm missing in that code. Probably obvious....

Thanks for the help. I'll increase the point to 500 since this was a bit trickier then I first believed.

ASKER

Believe it or not. I moved the div code before the table and that did the trick. I don't know how that's possible though,but I just had to try .

Okay - let me save your code and run some local tests. It exhibits the same behaviour for me.
Not to worry - we'll get it.

Yes - because the parent table wasn't closed - so it was being absolutely positioned to the table cell, as opposed to the body ...

ASKER CERTIFIED SOLUTION

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

ASKER

...and you're absolutely right as usual. Thanks a million. As I said "Probably obvious...." but it's hard to find when you've been staring down the code a few hours.

Thanks again.

You can say that again - a fresh pair of eyes is really helpful every now and then :-)

Thanks MaB - and best of luck with the intranet site.

Sean

Even if the question is already closed, here is my solution, better than the accepted one, I think.
Have you tried using "width = 100%" on a table level or even at the DIV level ?!

Cheers.

ASKER

No, haven't tried that on this page because I didn't need a 100% size div or table this time. All I wanted to do was to put a couple of links a bit outside "the focus" of the page since they are more fun than essential. The table layout for the rest of the top page I don't want to fiddle with more then necessary since every time I change a value somewhere I seem to get stuck for hours reproducing the earlier layout.

Thanks for the tip though.

BR MaB

Ok. No problem.

Best regards.

Just a thought,
While you are having an issue in IE6 (The most forgiving of browsers) you will need to add a Java Script for Netscape browsers that will force the DIV to move or re-position itself if the window is refreshed and re-sized.

Basically, in Netscape 4.5- 6 there is a flaw in the rendering engine that bases the size of the drawing or rendered canvas on the area which is displayed within the browser window. So, Absolute positioning is relative to that canvas. When a user re-sizes the window that absolute position is changed as the canvas size changes. However, Netscape wont move the DIV releative to the new browser window re-fresh. This little bug is why you need the script to force the DIV to move or its location be re-calculated based on the new browser window size.

Q2

ASKER

Thanks for the comment Q2. Knowledge is nice.

BR MaB