By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
438,625 Members | 2,261 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 438,625 IT Pros & Developers. It's quick & easy.

Floating divs

P: n/a
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
Share this Question
Share on Google+
10 Replies


P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

P: n/a
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

This discussion thread is closed

Replies have been disabled for this discussion.