All <div>'s to the bottom

J

J. Codling

I have been teaching myself CSS over the last week using the
web and this newsgroup. I'm a newbie to CSS but not to HTML.

This is an example of a long page...
http://circuit.no-ip.org/workplace/?page=links.php

What I want is for the side menu to continue all the way to
the bottom. Right now I am forcing it to do that with a
height of 5000px. I would like to make it so the whole page
fits together and ends at the same time so I don't have to
worry about the length of a page being more than that
amount. (That would be a long page indeed!)

I have three div's to make the left menu
(.sidebar/.menu/.midbar) that I would like to stay even with
the content of the page. I tried setting height=100%; but it
only goes to 100% of the screen height.

Am I barking up the wrong tree here and I should leave it
the way it is or is there an easier way to get the site to
stay together without brute force? I think I am finally
getting the hang of

All my observations are in IE6 because this is the browser
that most people will be viewing from.

Thanks for the help!
--
ttyl,

CiRcUiT -=- J. Codling -=- www.jcodling.com

*This message represents the official opinions of the voices
in my head*
 
R

Richard

J. Codling said:
I have been teaching myself CSS over the last week using the
web and this newsgroup. I'm a newbie to CSS but not to HTML.

This is an example of a long page...
http://circuit.no-ip.org/workplace/?page=links.php

What I want is for the side menu to continue all the way to
the bottom. Right now I am forcing it to do that with a
height of 5000px. I would like to make it so the whole page
fits together and ends at the same time so I don't have to
worry about the length of a page being more than that
amount. (That would be a long page indeed!)

I have three div's to make the left menu
(.sidebar/.menu/.midbar) that I would like to stay even with
the content of the page. I tried setting height=100%; but it
only goes to 100% of the screen height.

Am I barking up the wrong tree here and I should leave it
the way it is or is there an easier way to get the site to
stay together without brute force? I think I am finally
getting the hang of

All my observations are in IE6 because this is the browser
that most people will be viewing from.

Thanks for the help!
--
ttyl,

CiRcUiT -=- J. Codling -=- www.jcodling.com

*This message represents the official opinions of the voices
in my head*

There is no "bottom" nor is there a defined right edge.
A possible way to do what you want is to have one large container for all
the divisions.
Define that container's width and height.
Now set your menu division to 100% height.
 
J

J. Codling

|
| "J. Codling" <jcodling~AT~jcodling~DOT~com> wrote in
message
| | > I have been teaching myself CSS over the last week using
the
| > web and this newsgroup. I'm a newbie to CSS but not to
HTML.
| >
| > This is an example of a long page...
| > http://circuit.no-ip.org/workplace/?page=links.php
| >
| > What I want is for the side menu to continue all the way
to
| > the bottom. Right now I am forcing it to do that with a
| > height of 5000px. I would like to make it so the whole
page
| > fits together and ends at the same time so I don't have
to
| > worry about the length of a page being more than that
| > amount. (That would be a long page indeed!)
| >
| > I have three div's to make the left menu
| > (.sidebar/.menu/.midbar) that I would like to stay even
with
| > the content of the page. I tried setting height=100%;
but it
| > only goes to 100% of the screen height.
| >
| > Am I barking up the wrong tree here and I should leave
it
| > the way it is or is there an easier way to get the site
to
| > stay together without brute force? I think I am finally
| > getting the hang of
| >
| > All my observations are in IE6 because this is the
browser
| > that most people will be viewing from.
| >
| > Thanks for the help!
| > --
| > ttyl,
| >
| > CiRcUiT -=- J. Codling -=- www.jcodling.com
| >
| > *This message represents the official opinions of the
voices
| > in my head*
| >
|
| There is no "bottom" nor is there a defined right edge.
| A possible way to do what you want is to have one large
container for all
| the divisions.
| Define that container's width and height.
| Now set your menu division to 100% height.
|
|


I think I have just resigned myself to having the div's
height set to 5000px. It doesn't really change anything and
has the effect I want.

Thanks for the responce though!
--
ttyl,

CiRcUiT -=- J. Codling -=- www.jcodling.com

*This message represents the official opinions of the voices
in my head*
 
B

Beauregard T. Shagnasty

Quoth the raven named J. Codling:
| > This is an example of a long page... | >
http://circuit.no-ip.org/workplace/?page=links.php
I think I have just resigned myself to having the div's height set
to 5000px. It doesn't really change anything and has the effect I
want.

But... you now have 1,500px of empty space at the bottom of the page!
Your visitors will continue to scroll looking for something to read.

Not a good idea at all.
 
M

mscir

There is no "bottom" nor is there a defined right edge.
A possible way to do what you want is to have one large container for all
the divisions.
Define that container's width and height.
Now set your menu division to 100% height.

This is very good suggestion and easy to implement, if I understand you
correctly you mean something like this approach:

change 5000px to 100% in these places

..sidebar { HEIGHT: 100%; }
..menu { HEIGHT: 100%; }
..midbar { HEIGHT: 100%; }

add a new div called "wholepage"

<BODY>
<IMG src="jcodling_com_files/logo.jpg">

<!-- start wholepage div -->
<div class="wholepage">

<!-- start main div -->
<DIV class=main>


.....page contents....


</DIV>
<!-- end menu div -->

</div>
<!-- end wholepage div -->

</BODY>
</HTML>

It looks good in my Windows 98 IE6, Netscape 7, Firefox 0.8
Mike
 
J

J. Codling

"Beauregard T. Shagnasty" <[email protected]>
wrote in message
| Quoth the raven named J. Codling:
|
| > | > This is an example of a long page... | >
| > http://circuit.no-ip.org/workplace/?page=links.php
|
| > I think I have just resigned myself to having the div's
height set
| > to 5000px. It doesn't really change anything and has the
effect I
| > want.
|
| But... you now have 1,500px of empty space at the bottom
of the page!
| Your visitors will continue to scroll looking for
something to read.
|
| Not a good idea at all.
|
| --
| -bts
| -This space intentionally left blank.

Then how would you suggest I fix this then? I would like it
to NOT have the extra space if I can do it.
 
J

J. Codling

|
| "J. Codling" <jcodling~AT~jcodling~DOT~com> wrote in
message
| [..SNIP..]
|
| There is no "bottom" nor is there a defined right edge.
| A possible way to do what you want is to have one large
container for all
| the divisions.
| Define that container's width and height.
| Now set your menu division to 100% height.
|
|


I really need to read the whole post. I thought I did but I
am burning 400 CDs and chatting and reading the newsgroups
all at the same time. Oops.

I'm going to try and make a container like you suggest.
 
R

Richard

mscir said:
This is very good suggestion and easy to implement, if I understand you
correctly you mean something like this approach:

You basically have the concept. Since you're using supernews, maybe later
I'll put up a sample on alt.binaries.html.
 
J

J. Codling

"J. Codling" <jcodling~AT~jcodling~DOT~com> wrote in message
| "Beauregard T. Shagnasty" <[email protected]>
| wrote in message
| | | Quoth the raven named J. Codling:
| |
| | > | > This is an example of a long page... | >
| | > http://circuit.no-ip.org/workplace/?page=links.php
| |
| | > I think I have just resigned myself to having the
div's
| height set
| | > to 5000px. It doesn't really change anything and has
the
| effect I
| | > want.
| |
| | But... you now have 1,500px of empty space at the bottom
| of the page!
| | Your visitors will continue to scroll looking for
| something to read.
| |
| | Not a good idea at all.
| |
| | --
| | -bts
| | -This space intentionally left blank.
|
| Then how would you suggest I fix this then? I would like
it
| to NOT have the extra space if I can do it.
|
|

Scratch that... see the other post... I'm a silly bugger.
 
J

J. Codling

"J. Codling" <jcodling~AT~jcodling~DOT~com> wrote in message
| | |
| | "J. Codling" <jcodling~AT~jcodling~DOT~com> wrote in
| message
| | | [..SNIP..]
| |
| | There is no "bottom" nor is there a defined right edge.
| | A possible way to do what you want is to have one large
| container for all
| | the divisions.
| | Define that container's width and height.
| | Now set your menu division to 100% height.
| |
| |
|
|
| I really need to read the whole post. I thought I did but
I
| am burning 400 CDs and chatting and reading the newsgroups
| all at the same time. Oops.
|
| I'm going to try and make a container like you suggest.
|

....and of course it works!

Thank you very much.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top