Floating divs

salmobytes

My machine generated site displays navigation links (in a table td,
alas, I'll fix that someday)
at screen left, with main display in a td at screen right.

Pages with lots of navigation links force the user to scroll downward
(to see the
links at screen bottom) which sometimes pushes the main display
visually off screen .

I've experimented with javascript, using code that
floats the main display div downward as the page is scrolled, so the
main
display is always visible.

So I'm just curious: is it or would it be possible, to do the same
thing
with css somehow, rather than javascript? (probably not, I'm
guessing).
But maybe.

Apr 30 '07 #1

Ben C

On 2007-04-30, salmobytes <Sa***************@gmail.comwrote:

My machine generated site displays navigation links (in a table td,
alas, I'll fix that someday)
at screen left, with main display in a td at screen right.

Pages with lots of navigation links force the user to scroll downward
(to see the
links at screen bottom) which sometimes pushes the main display
visually off screen .

I've experimented with javascript, using code that
floats the main display div downward as the page is scrolled, so the
main
display is always visible.

So I'm just curious: is it or would it be possible, to do the same
thing
with css somehow, rather than javascript? (probably not, I'm
guessing).
But maybe.

It is possible, using position: fixed. But the effect is a bit jerky
looking in some browsers.

Apr 30 '07 #2

Jonathan N. Little

salmobytes wrote:

My machine generated site displays navigation links (in a table td,
alas, I'll fix that someday)
at screen left, with main display in a td at screen right.

Pages with lots of navigation links force the user to scroll downward
(to see the
links at screen bottom) which sometimes pushes the main display
visually off screen .

I've experimented with javascript, using code that
floats the main display div downward as the page is scrolled, so the
main
display is always visible.

So I'm just curious: is it or would it be possible, to do the same
thing
with css somehow, rather than javascript? (probably not, I'm
guessing).
But maybe.

And what would happen if the "main" section was also greater than the
browser window and you prevented scrolling?

1) find a way to reduce, consolidate, or divide your navigation links in
a more manageable chunk

2) live with the list that you must scroll a mile to reach the last.

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Apr 30 '07 #3

zzpat

salmobytes wrote:

>
I've experimented with javascript, using code that
floats the main display div downward as the page is scrolled, so the
main
display is always visible.

You have to ask yourself if it's absolutely necessary to have the main
display always visible. In 99.999% of cases it's not. Besides, people
know how to scroll and they know how to find the main display. Don't
treat them like idiots.

Apr 30 '07 #4

salmobytes

On Apr 30, 10:17 am, "Jonathan N. Little" <lws4...@centralva.net>
wrote:

Two responses have now said "don't bother to ask or try,
what you want to do is not a good idea anyway."

That may well be true (what I proposed probably is a bad idea) but it
still doesn't answer
the original question, which I'm now just curious about, for
curiosity's
sake:

I know I can float a main display div with javascript, so it follows
the scrollbar. Is that or would that somehow be possible, with
pure css? .....good idea or otherwise....

Apr 30 '07 #5

Rob

salmobytes schreef:

On Apr 30, 10:17 am, "Jonathan N. Little" <lws4...@centralva.net>
wrote:

[snipped]

... but it
still doesn't answer
the original question, which I'm now just curious about, for
curiosity's
sake:

I know I can float a main display div with javascript, so it follows
the scrollbar. Is that or would that somehow be possible, with
pure css? .....good idea or otherwise....

The first answer you got was from Ben C,
who suggested you use 'position: fixed',
that's CSS.

Rob

Apr 30 '07 #6

salmobytes

On Apr 30, 12:50 pm, Rob <robwaaijenb...@hotmail.comwrote:

The first answer you got was from Ben C,
who suggested you use 'position: fixed',
that's CSS.

oops. I missed that. Ok thank you.
I'll shut up now.

Apr 30 '07 #7

dorayme

In article
<11*********************@y80g2000hsf.googlegroups. com>,
salmobytes <Sa***************@gmail.comwrote:

On Apr 30, 12:50 pm, Rob <robwaaijenb...@hotmail.comwrote:

The first answer you got was from Ben C,
who suggested you use 'position: fixed',
that's CSS.

oops. I missed that. Ok thank you.
I'll shut up now.

In case you did not quite understand it, it is the nav on the
left that you "fix". And, btw, as JL implied, your idea of js or
css to make the content float down has the downside that if it
itself gets to be bigger as you update it, you will have a
problem of folk being unable to see the contents unless they buy
a very tall screen.

--
dorayme

Apr 30 '07 #8

Jonathan N. Little

Rob wrote:

salmobytes schreef:

>On Apr 30, 10:17 am, "Jonathan N. Little" <lws4...@centralva.net>
wrote:

[snipped]

>... but it
still doesn't answer
the original question, which I'm now just curious about, for
curiosity's
sake:

I know I can float a main display div with javascript, so it follows
the scrollbar. Is that or would that somehow be possible, with
pure css? .....good idea or otherwise....

The first answer you got was from Ben C,
who suggested you use 'position: fixed',
that's CSS.

Suit yourself!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta http-equiv="content-language" content="en-us">
<title>A Bad Idea</title>

<style type="text/css">
DIV { border: 1px solid red; width: 20em; position: fixed; }
</style>

</head>
<body>
<h1>A Bad Idea</h1>
<p>Try to reach paragraph 1000 in a real web (not MSIE) browser!</p>
<div>
<script type="text/javascript">
var buf='';
for( i=1; i<1001; i++){
buf+='<p>Sample Paragraph ' + i + '</p>';
}
document.write(buf);
</script>
</div>
</body>
</html>

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

Apr 30 '07 #9

zzpat

salmobytes wrote:

On Apr 30, 10:17 am, "Jonathan N. Little" <lws4...@centralva.net>
wrote:

Two responses have now said "don't bother to ask or try,
what you want to do is not a good idea anyway."

Try this morsel.
http://limpid.nl/lab/css/fixed/header-and-footer

Apr 30 '07 #10

salmobytes

On Apr 30, 5:33 pm, zzpat <zzpatr...@gmail.comwrote:

Try this morsel.http://limpid.nl/lab/css/fixed/header-and-footer

Thank you.
That works beautifully in Firefox on linux and IE7 on wintel
what ever it is I have, pre-vista.
I'll try Safari tomorrow.

I see from Googling around this "fixed" positioning will not
work in IE6, which still has something like 38% market share.
I don't have IE6 installed anywhere, so I can't test.

Is it correct to assume it would mean (if I tried to 'fix' a short
display next
to a taller, left-side navigation DIV, that it wouldn't break anything
in IE6........that the shorter, right-side display DIV would simply
dissappear
off screen as the user scrolled down to the bottom of the taller
left-side navigation DIV?

May 2 '07 #11