Dynamically Extending height

Please look at: https://testbed.odysseyshipping.com

How can I dynamically extend the height of the left hand side so that
it touches the footer? Do I need a graphic to simulate this?

Thanks,
Don

On Dec 11, 11:16*am, donpro <donpro-2... (AT) rogers (DOT) com> wrote:

Please look at:https://testbed.odysseyshipping.com

How can I dynamically extend the height of the left hand side so that
it touches the footer? *Do I need a graphic to simulate this?

<http://dorayme.netweaver.com.au/alt/twoBytwo_faux2.html>

On Dec 10, 9:07*pm, dorayme <dora... (AT) optusnet (DOT) com.au> wrote:

On Dec 11, 11:16*am, donpro <donpro-2... (AT) rogers (DOT) com> wrote:

Please look at:https://testbed.odysseyshipping.com

How can I dynamically extend the height of the left hand side so that
it touches the footer? *Do I need a graphic to simulate this?

http://dorayme.netweaver.com.au/alt/twoBytwo_faux2.html

I looked. I don't get it, sorry.

donpro wrote:

Please look at: https://testbed.odysseyshipping.com

How can I dynamically extend the height of the left hand side so that
it touches the footer? Do I need a graphic to simulate this?

Since the right side is an image, you know it's height. Set the left
side container to that height.

Dorayme's example works if you know one column will always be the
longest. It's simple and clever.

Otherwise google for equal column height. There's a lot of ways to do
this, none perfect.

Jeff

Thanks,
Don

On Dec 11, 2:25*pm, Jeff <jeff (AT) spam_me_not (DOT) com> wrote:

donpro wrote:
Please look at:https://testbed.odysseyshipping.com

How can I dynamically extend the height of the left hand side so that
it touches the footer? *Do I need a graphic to simulate this?

* *Since the right side is an image, you know it's height. Set the left
side container to *that height.

* *Dorayme's example works if you know one column will always be the
longest. It's simple and clever.

Actually, if you populate the left col in my above URL with many more
list items or the right with many more paragraphs or both, the full
length cols should still work fine. At least on my tests in Safari and
FF.

Perhaps you are thinking of some other experiments and examples I have
elsewhere, like:

<http://netweaver.com.au/floatHouse/page11.php>

On Dec 11, 1:34*pm, donpro <donpro-2... (AT) rogers (DOT) com> wrote:

On Dec 10, 9:07*pm, dorayme <dora... (AT) optusnet (DOT) com.au> wrote:

On Dec 11, 11:16*am, donpro <donpro-2... (AT) rogers (DOT) com> wrote:

Please look at:https://testbed.odysseyshipping.com

How can I dynamically extend the height of the left hand side so that
it touches the footer? *Do I need a graphic to simulate this?

http://dorayme.netweaver.com.au/alt/twoBytwo_faux2.html

I looked. *I don't get it, sorry.

The reason I did not get into your code is the great number of
stylesheets and complexity. So I referred you to a simpler model that
illustrates getting full length height, hoping you might adapt the
idea to your design.

But let's simplify mine even further, the HTML could not be much
simpler, a left floated navigation col and the right content col
simply paragraphs.

<http://dorayme.netweaver.com.au/alt/fauxFullHeight.html>

The key points to the CSS:

1. html {height: 100%;} to give some reference to the body element and
so on down. % must be of something. This first % gets it in relation
to the viewport. You can test this by giving the root element a
distinctive background colour and the other elements transparent
backgrounds (the defaults).

2. body {height: 100%; color: #fff; background: #fff url("pics/
ccf_200px.gif") repeat-y;} The height gets it to be 100% of body, the
background white is to ensure the html is not seen and/or to give a
wanted colour to where the background image is not. The background
image is to provide an appearance of a column by means of being
repeated in only the up-down direction and placed, by default in this
case, on left.

On Dec 11, 5:14*pm, dorayme <dora... (AT) optusnet (DOT) com.au> wrote:

The height gets it to be 100% of body, the

should read

The height gets it to be 100% of HTML

dorayme wrote:

On Dec 11, 2:25 pm, Jeff <jeff (AT) spam_me_not (DOT) com> wrote:
donpro wrote:
Please look at:https://testbed.odysseyshipping.com
How can I dynamically extend the height of the left hand side so that
it touches the footer? Do I need a graphic to simulate this?
Since the right side is an image, you know it's height. Set the left
side container to that height.

Dorayme's example works if you know one column will always be the
longest. It's simple and clever.


Actually, if you populate the left col in my above URL with many more
list items or the right with many more paragraphs or both, the full
length cols should still work fine. At least on my tests in Safari and
FF.

Perhaps you are thinking of some other experiments and examples I have
elsewhere, like:

http://netweaver.com.au/floatHouse/page11.php

Yes, my mistake!

I made an assumption without looking. When I have a moment I'll get
updated.

Jeff

On Dec 11, 1:14*am, dorayme <dora... (AT) optusnet (DOT) com.au> wrote:

On Dec 11, 1:34*pm, donpro <donpro-2... (AT) rogers (DOT) com> wrote:

On Dec 10, 9:07*pm, dorayme <dora... (AT) optusnet (DOT) com.au> wrote:

On Dec 11, 11:16*am, donpro <donpro-2... (AT) rogers (DOT) com> wrote:

Please look at:https://testbed.odysseyshipping.com

How can I dynamically extend the height of the left hand side so that
it touches the footer? *Do I need a graphic to simulate this?

http://dorayme.netweaver.com.au/alt/twoBytwo_faux2.html

I looked. *I don't get it, sorry.

The reason I did not get into your code is the great number of
stylesheets and complexity. So I referred you to a simpler model that
illustrates getting full length height, hoping you might adapt the
idea to your design.

But let's simplify mine even further, the HTML could not be much
simpler, a left floated navigation col and the right content col
simply paragraphs.

http://dorayme.netweaver.com.au/alt/fauxFullHeight.html

The key points to the CSS:

1. html {height: 100%;} to give some reference to the body element and
so on down. % must be of something. This first % gets it in relation
to the viewport. You can test this by giving the root element a
distinctive background colour and the other elements transparent
backgrounds (the defaults).

2. body {height: 100%; color: #fff; background: #fff url("pics/
ccf_200px.gif") repeat-y;} The height gets it to be 100% of body, the
background white is to ensure the html is not seen and/or to give a
wanted colour to where the background image is not. The background
image is to provide an appearance of a column by means of being
repeated in only the up-down direction and placed, by default in this
case, on left.

The example implies that I know the pixel width of my left hand
sidebar which I do not. It is a percentage. So....., what
dimensions do I create the background image at?

Also. I only need this done for ONE page o my site as all other pages
will not have the left had sidebar. I know of no way to include
conditional code in a CSS file so I suppose this means a separate CSS
fle for that one page?

donpro wrote:

On Dec 11, 1:14 am, dorayme <dora... (AT) optusnet (DOT) com.au> wrote:

2. body {height: 100%; color: #fff; background: #fff url("pics/
ccf_200px.gif") repeat-y;}

The example implies that I know the pixel width of my left hand
sidebar which I do not. It is a percentage. So....., what
dimensions do I create the background image at?

Make the image very wide, like 3000px, color 1 end and leave the rest
transparent. Color the same percentage as the element width, e.g.
900px for width:30%, and also assign that % value in the bg position.
background-position: 30% 0;

Adjust to taste. BTW, you shouldn't need to explicitly set body height
to 100% to tile the image to the end of the screen/page. In fact, it's
probably better if you don't because the color may be cut off when the
page is scrolled down.

Also. I only need this done for ONE page o my site as all other pages
will not have the left had sidebar. I know of no way to include
conditional code in a CSS file so I suppose this means a separate CSS
fle for that one page?

You could add an embedded stylesheet to that page (via the <style>
element) but if you decided to use the image on other pages in the
future you'd be doing this on multiple pages. A more flexible solution
is to assign a class selector to the body element and use the bg image
just in those cases.

--
Berg